Тень — это эффект, который отбрасывает или добавляет тень за выбранными элементами HTML при отображении на веб-странице. Такого эффекта можно добиться с помощью « тень() ' метод как значение для CSS ' фильтр ” свойство или с помощью “ коробка-тень ' свойство. Используя свойство «box-shadow», визуальное улучшение, удобство для пользователя, выделение и фокус можно привлечь к конкретному целевому HTML-элементу.
В этом руководстве демонстрируется процедура создания эффекта тени с использованием свойства box-shadow:
-
- Создайте сплошную тень, используя свойство box-shadow
- Создайте размытую тень, используя свойство box-shadow
- Расширьте область тени
Как сделать тени в CSS3, используя свойство box-shadow?
“ коробка-тень ” позволяет разработчику установить визуальную иерархию, указав относительное положение элементов на странице. Используя его, создатели веб-страниц могут создавать иллюзию объектов, отбрасывающих тени на поверхности, придавая элементам более интерактивный вид.
Синтаксис
Свойство box-shadow имеет следующий синтаксис:
коробка-тень: [ горизонтальное смещение ] [ вертикальное смещение ] [ радиус размытия ] [ радиус распространения ] [ цвет ] ;
Объяснение терминов, используемых в приведенном выше синтаксисе:
-
- Изначально « горизонтальное смещение » извлекает/сохраняет положение оси X, а « отрицательный » устанавливает тень слева и наоборот.
- “ вертикальное смещение ” хранит положение по оси Y, значение “ положительный » устанавливает тень в нисходящем направлении, и наоборот в случае « отрицательный ' ценить.
- Далее « радиус размытия ” значение из названия задает размытость тени.
- “ радиус распространения Значение указывает, на какой радиус должна расширяться тень.
- “ цвет » задает цвет тени, он может быть в « ВШЛ ' или ' RGB », а также.
Теперь давайте рассмотрим пару примеров для лучшего понимания:
Пример 1. Применение сплошной тени с использованием свойства box-shadow
Для настройки сплошной тени только направление и цвет тени вставляются в качестве значения в « коробка-тень ' свойство:
< стиль >.boxShadowExample {
ширина: 210 пикселей;
граница: сплошной кукурузный шелк 2px;
высота: 210 пикселей;
фоновый цвет: #f0f0f0;
box-shadow: 10px 10px зелено-зеленый;
}
стиль >
В приведенном выше коде:
-
- Сначала выбирается элемент HTML, имеющий класс « boxShadowExample ». И значение « 210 пикселей » предоставляется « высота ' и ' ширина ' характеристики. Кроме того, используйте « граница ' и ' фоновый цвет ” свойства для лучшей визуализации.
- Далее установите значение « 10px 10px ” к “ коробка-тень Свойство CSS. “ 10 пикселей ” — горизонтальное и вертикальное смещение, определяющее место, где должна применяться тень. И « зеленый лес ” – это цвет тени.
После компиляции веб-страница выглядит так:
Выходные данные подтверждают, что тень сплошного типа была размещена с использованием свойства box-shadow.
Пример 2. Применение размытой тени с использованием свойства box-shadow
Чтобы сделать уже нанесенную тень размытой, перед цветом для « коробка-тень ' свойство. Посетите приведенный ниже обновленный код:
< стиль >.boxShadowExample {
ширина: 210 пикселей;
граница: сплошной кукурузный шелк 2px;
высота: 210 пикселей;
цвет фона: белый дым;
box-shadow: 10px 10px 15px зеленый цвет;
}
стиль >
В соответствии с приведенным выше кодом тень теперь « 15 пикселей ' размытый. После завершения этапа компиляции веб-страница выглядит так:
На приведенном выше рисунке показано, что тень теперь размыта.
Пример 3: Расширение области тени
Значение спреда предоставляется « коробка-тень свойство для расширения области тени. Значение спреда должно быть в числовом формате. Как и в приведенном ниже фрагменте кода, теневая область расширяется до « 20 пикселей ”:
< стиль >.boxShadowExample {
ширина: 210 пикселей;
граница: сплошной кукурузный шелк 2px;
высота: 210 пикселей;
цвет фона: белый дым;
box-shadow: 10px 10px 15px 20px зеленый цвет;
}
стиль >
После выполнения тень теперь выглядит так:
Как видите, область тени теперь увеличена на 20 пикселей.
Заключение
“ коробка-тень ” свойство используется для создания “ тень » на выбранные элементы HTML. “ тень ” свойство принимает пять значений, “ горизонтальное смещение », « вертикальное смещение », « радиус размытия », « радиус распространения ' и ' цвет ». Значения «горизонтальное смещение» и «вертикальное смещение» задают размеры тени, из которой должна появиться тень. Значение «радиус размытия» делает тень размытой, а значение «радиуса распространения» расширяет область тени.