box — shadow
Свойство, с помощью которого можно задать блоку тень.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство, бросающее тень на ваши блоки 👤
Создано, чтобы имитировать объекты реального мира и создавать иллюзию объёма для плоских элементов интерфейса.
Пример
Скопировать ссылку «Пример» Скопировано
Частая ситуация — выделить кнопку, задав ей тень, что визуально сделает её объёмной.
button class="button">Купить немедленно!button>
Помимо основных оформительских стилей задаём нашей кнопке тень:
.button box-shadow: -15px 15px 0 0 #ED6742;>.button box-shadow: -15px 15px 0 0 #ED6742; >
Получаем псевдообъёмную кнопку, которая парит над страницей:
+ Развернуть
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 С помощью тени можно создать блок с несколькими рамками!
div class="box square">div> div class="box circle">div> .box width: 120px; height: 120px; box-shadow: inset 0 0 6px 0 #c000ff, 0 0 0 3px #c000ff, 0 0 6px 3px #c000ff, 0 0 0 7px #18191C, 0 0 0 10px #6e4aff, 0 0 6px 10px #6e4aff, 0 0 0 14px #18191C, 0 0 0 17px #c000ff, 0 0 6px 17px #c000ff;>.box width: 120px; height: 120px; box-shadow: inset 0 0 6px 0 #c000ff, 0 0 0 3px #c000ff, 0 0 6px 3px #c000ff, 0 0 0 7px #18191C, 0 0 0 10px #6e4aff, 0 0 6px 10px #6e4aff, 0 0 0 14px #18191C, 0 0 0 17px #c000ff, 0 0 6px 17px #c000ff; >
🛠 Тени можно использовать для ховер-эффектов. При помощи теней кнопка сделана выпуклой, а при нажатии она становится вдавленной за счёт изменения положения теней.
button class="btn">Зажмиbutton>
.btn box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5;> .btn:active box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, inset -6px -6px 8px 0 #3185d5, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5, inset 6px 6px 8px 0 #c9c9c9;>.btn box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5; > .btn:active box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, inset -6px -6px 8px 0 #3185d5, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5, inset 6px 6px 8px 0 #c9c9c9; >
Татьяна Фокина советует
Скопировать ссылку «Татьяна Фокина советует» Скопировано
🛠 Если используете box — shadow для стилей фокуса, то они не поддерживаются в режиме высокой контрастности в Windows. Режим ограничивает количество цветов, чтобы повысить читаемость текста за счёт изменения контраста текста и фона.
Чтобы фокус был виден всем пользователям, задайте альтернативные стили в директиве @media со значением forced — colors .
a:focus outline: none; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato;> @media (forced-colors: active) a:focus outline: 0.2em solid; >>a:focus outline: none; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato; > @media (forced-colors: active) a:focus outline: 0.2em solid; > >
Второй способ решения проблемы с видимостью box — shadow в режиме высокой контрастности — прозрачный outline .
a:focus outline: 2px solid transparent; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato;>a:focus outline: 2px solid transparent; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato; >
box-shadow
CSS-свойство box-shadow добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом.
Интерактивный пример
Свойство box-shadow включает отбрасывание тени от границ практически любого элемента. Если для элемента с тенью задан border-radius , то отбрасываемая тень также будет с закруглёнными углами. Порядок наложения нескольких теней такой же, что и у текстовых теней: первая указанная тень будет поверх остальных.
Генератор теней — интерактивный инструмент, позволяющий сгенерировать значение для box-shadow .
Синтаксис
/* Ключевые слова */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Любое количество теней через запятую */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Глобальные значения */ box-shadow: inherit; box-shadow: initial; box-shadow: revert; box-shadow: revert-layer; box-shadow: unset;
Каждая тень определяется следующим образом:
Для одновременного создания нескольких теней используйте список значений, разделённых запятыми.
Значения
Если не указано (по умолчанию), то тень будет отбрасываться от элемента (придавая эффект выпуклости блоку). Наличие ключевого слова inset отбрасывает тень внутри элемента (создавая эффект вдавленности блока). Внутренние тени начинаются с рамок элемента (даже если они прозрачные), над фоном элемента, но не под его содержимым.
…для длинного прямого края тени должен быть создан цветовой переход, равный длине расстояния размытия, который перпендикулярен и центрирован по краю тени. Переход начинается от указанного цвета тени в конечной точке радиуса внутри тени до полностью прозрачного цвета в конечной точке пределов радиуса.
Интерполяция
Каждая тень в списке ( none считается за пустой список) интерполируется через значения цвета x, y, радиуса размытия и (когда это допустимо) и радиуса расширения. Для каждой тени, если обе входные тени отмечены как inset или ни одна из них таковой не является, то интерполированная тень будет соответствовать входным теням. Если в любой паре входных теней одна из них является внутренней ( inset ), а другая нет, то список теней не интерполируется. Если количество теней отличается в разных списках, то более короткий список дополняется в конце тенями, цвет которых прозрачен ( transparent ), все значения длин равны 0 , и где inset соответствует более длинному списку.
Формальное определение
| Начальное значение | none |
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter . |
| Наследуется | нет |
| Обработка значения | любая абсолютная длина; работает любой указанный цвет; если другое не указано |
| Animation type | список теней |
Формальный синтаксис
box-shadow =
none | (en-US)
# (en-US)
=
? (en-US) && (en-US)
[ (en-US) (en-US) ? (en-US) ? (en-US) ] (en-US) && (en-US)
inset? (en-US)
Примеры
Добавление трёх теней
В этом примере применяется сразу три тени: внутренняя тень, обычная внешняя отбрасываемая тень, а также тень размером 2 пикселя, имитирующая рамку (для создания рамки можно было воспользоваться outline (en-US)).
HTML
blockquote>q>Меня уколют ваши речи,br/> Об ваши взгляды обожгусь,br/> И ранит ложь сильней картечиbr/> Но все равно я поднимусь.q> p>— Майя Энджелоуp> blockquote>
CSS
blockquote padding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3); > Результат
Использование нулевых значений для смещений и радиуса размытия
Когда смещение по X ( x-offset ), смещение по Y ( y-offset ) и радиус размытия ( blur ) равны нулю, тень будет представлять собой цветной контур одинакового размера на всех сторонах блока. Тени отображаются с конца списка, поэтому первая тень накладывается поверх последующих. Когда в border-radius указано значение по умолчанию 0 , углы тени становятся прямыми углами. Соответственно, если указать в border-radius любое другое значение, углы станут закруглёнными.
Чтобы тень не перекрывала соседние элементы и не выходила за границу содержащего блока, был добавлен внешний отступ размером, равный самому большому радиусу размытия в списке теней. Тень не влияет на размеры блочной модели.
HTML
Тени
Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.
Для добавления тени используется свойство box-shadow , у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.
Рис. 1. Значения свойства box-shadow
- ключевое слово inset устанавливает тень внутри элемента;
- сдвиг тени по горизонтали (5px — вправо, -5px — влево);
- сдвиг по вертикали (5px — вниз, -5px — вверх);
- радиус размытия тени (0 — резкая тень);
- растяжение тени (5px — растяжение, -5px — сжатие);
- цвет тени.
Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета.
За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.
| Код | Результат | Описание |
|---|---|---|
| box-shadow: 5px 5px; |  | Резкая тень справа и снизу. |
| box-shadow: -5px -5px; |  | Резкая тень слева и сверху. |
| box-shadow: 0 0 5px; |  | Размытая тень вокруг элемента. |
| box-shadow: 0 0 5px 2px; |  | Расширение тени на 2 пиксела. |
| box-shadow: 0 0 5px 2px red; |  | Красное свечение вокруг элемента. |
| box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); |  | Полупрозрачная тень. |
| box-shadow: inset 0 0 6px; |  | Тень внутри. |
Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.
Пример 1. Тень на фоновом рисунке
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Не идти против знамён противника, когда они в полном порядке; не нападать на стан противника, когда он неприступен; это и есть управление изменениями.
Сунь-цзы, пер. Николай Конрад
Результат данного примера показан на рис. 2. Тень повторяет скругление уголков блока.
Рис. 2. Вид тени на фоновом рисунке
При добавлении «широкой» тени следует учесть, что она может выйти за пределы видимого окна браузера и привести таким образом к появлению горизонтальной полосы прокрутки.
Тень также можно добавлять и к псевдоэлементам, это иногда требуется для сложной вёрстки. На рис. 3 показан блок с заголовком, к которому добавлена тень. Чтобы не было никаких линий в месте стыка приходится использовать псевдоэлемент ::after и добавлять тень к нему.
В примере 2 показано создание такого блока.
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Заголовок Тень у элемента может быть не одна, а сразу несколько, их параметры перечисляются через запятую в значении свойства box-shadow . В примере 3 показано добавление двойной тени ко всем изображениям.
HTML5 CSS3 IE 9+ Cr Op Sa Fx
img 
Результат данного примера показан на рис. 4.
Рис. 4. Изображение с двойной тенью
Первая тень отображается слева от рисунка с радиусом размытия 20px, её размер уменьшен за счёт четвёртого параметра (-20px). Параметры второй тени указываются после запятой, тень отображается справа от рисунка и так же уменьшена для симметрии.
