| Kosten | Пятница, 16 Февраля 2018 | Сообщение 1 |
| Свойство box-shadow является свойством CSS3, который позволяет создавать эффекты тени на практически любой элемент, похожий на отбрасывание тени, где мы можем создать в разработке программного обеспечения. Эти теневые эффекты позволяют нам создавать иллюзию глубины на другой, плоской, двумерной странице. Теневой список, разделенный запятыми, все из которых определяются значениями длины 2-4. Они определяют горизонтальное и вертикальное смещение, поверх дополнительного расстояния размытия и расстояния распространения тени.
Также box-shadow позволяет разработчикам реализовывать несколько теней, внешних или внутренних, размещенных на элементах окна. Различные атрибуты, которые они могут изменить, это размер, цвет, смещение и размытие. Увеличивается поддержка через различные браузеры, включая Mozilla и Chrome. Mozilla и Webkit больше не требуют использования префиксов -moz- и -webkit- за исключением редких особых случаев.
Компоненты свойства box-shadow де кодируются браузерами следующим образом:
1. Первая длина для горизонтального смещения будет отбрасывать тень справа от поля с положительным значением, а отрицательное значение будет отбрасывать тень слева от поля.
2. Вторая длина - для вертикального смещения, а положительное значение будет бросать тень под полем, в то время как отрицательное значение будет отбрасывать тень над полем.
3. Третья длина - эффект размытия, а при установке на 0 - резкий результат, а более высокое значение добавит больше стирания. Отрицательные значения не допускаются.
4. Четвертая длина - это расстояние распространения, где положительные значения заставляют теневую форму расширяться во всех направлениях по указанному радиусу, а отрицательные значения заставляют теневую форму сжиматься.
5. Цвет - это определенный цвет формы тени.
6. Ключевое слово «вставка», если оно присутствует, приводит к внутренней тени, где появится окно, как будто вырезанное из холста и сдвинутое за ним.
Синтаксис
Синтаксис довольно прямолинейный, где единственные проблемы с которыми вы можете столкнуться, это появление теней на разных браузерах. Вам больше не нужно будет использовать набор префиксов для просмотра в браузерах Mozilla и Webkit. Следующий код является основой теневого окна.
Код #shadowBox {
box-shadow: 9px 8px 7px #635f5f;
}
Раньше вы добавляли следующее для других браузеров, добавляя префиксы для Webkit и Mozilla. Следующий код должен был появиться в других браузерах
Код #shadowBox {
-webkit-box-shadow: 9px 9px 6px #635f5f;
-moz-box-shadow: 9px 9px 6px #635f5f;
box-shadow: 9px 9px 6px #635f5f;
}
Свойства использования теней коробочки
Следующий список находится в порядке операций, в которых будет реализована тень ящика. Каждое из них важно принять к сведению изменение каждого отдельного атрибута элемента.
Горизонтальное смещение тени: положительное смещение будет отображать тень справа от поля, в то время как отрицательный будет помещать тень влево от окна.
Смещение вертикальной тени: отрицательное смещение поместит тень над полем, а положительная тень под полем.
Необязательный радиус размытия: это необязательный атрибут и если установлено значение 0, где тень будет резкой, если число будет выше, размытие будет следовать и увеличиваться.
Необязательный радиус распространения: Еще один необязательный атрибут, где положительные значения увеличивают тень, а отрицательные значения уменьшают размер. По умолчанию 0, то же самое, что и размытие.
Создание основных внешних теней
Наш первый взгляд будет заключаться в создании регулярной внешней тени на простой коробке. Чтобы учитывать разницу в разных браузерах, мы добавим похожие строки кодов с разными префиксами. Тени по существу вытягиваются за пределы разных элементов. Среди этого определения мы обнаруживаем, что внешняя теневая область бросает тень, как будто граница элемента была туманной, и также непрозрачнее.
Ниже приведен пример всех свойств в действии, включая дополнений. Вы можете увидеть основу процесса в действии. Изменив цвет, который он дополняет или может смешаться с фоном с уже установленным в HTML.
Код .effect{
box-shadow: 0 27px 8px -7px #635f5f;
}
Попробуйте этот код, где просто изменив некоторые значения и посмотрите, насколько сильно могут измениться тени. Просто переключив пару разных чисел, вы можете принести тень сверху вниз или слева направо. Здесь есть много возможностей понять весь аспект использования Теневого использования.
Код:
Код <div class="tunimdsa zornet-ru">
<h3>ZORNET.RU</h3>
</div>
CSS
Код .tunimdsa h3{
text-align:center;
position:relative;
top:91px;
}
.tunimdsa h3{
text-align:center;
position:relative;
top:78px;
}
.tunimdsa {
width:85%;
height:183px;
background:#f5e9e9;
margin:35px auto;
}
.zornet-ru{
box-shadow: 0 28px 9px -7px #635f5f;
}
Также можете посмотреть, как изначально можно сделать.
Демонстрация:
| | Страна: (RU) |
| |
