• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Значения CSS: свойство тени блока box-shadow (Примеры использования тени для элементов CSS)
Значения CSS: свойство тени блока box-shadow
Kosten
Дата: Пятница, 16.02.2018, 19:12 | Сообщение 1
Администраторы
Сообщений:17016
Награды: 55


Свойство 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;

}

Также можете посмотреть, как изначально можно сделать.

Демонстрация:
Прикрепления: 8175646.jpg(6.9 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Значения CSS: свойство тени блока box-shadow (Примеры использования тени для элементов CSS)
  • Страница 1 из 1
  • 1
Поиск: