Box-shadow: тень для элемента
Вы можете добавлять к элементам тень и изменять ее внешний вид с помощью CSS-свойства box-shadow. Этот стиль позволяет воплотить в жизнь интересные эффекты, например, объемность и трехмерность блока. Свойство поддерживается всеми современными браузерами. Исключение составляют IE8 и Opera Mini.
Свойство box-shadow: синтаксис
Данный стиль записывается следующим образом:
box-shadow: inset 4px 4px 8px 5px #333333;
Рассмотрим по порядку, за что отвечает каждый параметр (слева направо):
- Ключевое слово inset : параметр, который необязательно указывать; рисует тень внутри элемента.
- Сдвиг по оси X: указывает степень смещения тени по горизонтали относительно элемента. Положительное значение означает сдвиг вправо, отрицательное — влево. Значение 0 означает, что тень без сдвига.
- Сдвиг по оси Y: указывает степень смещения тени по вертикали. Положительное значение означает сдвиг вниз, отрицательное — вверх. Значение 0 — это тень без сдвига.
- Радиус размытия: это степень размытия тени. Чем больше значение, тем более размыта тень. Если параметр не указан, используется значение по умолчанию — 0 . В таком случае тень будет идеально четкой.
- Расширение: необязательный параметр, отвечающий за растяжение тени по обеим осям; чем больше значение, тем больше растяжение. Расширение работает только при наличии предыдущего параметра. Значение по умолчанию — 0 .
- Цвет тени: с этим параметром всё понятно — он задает цвет тени элемента. Цвет по умолчанию — черный.
Примечание. Браузерам Android и более старым версиям iPhone Safari требуется префикс -webkit- для корректной работы CSS свойства box-shadow.
Данное свойство может принимать несколько групп значений (делать несколько теней одновременно). Для этого понадобится перечислить эти группы параметров через запятую. Например:
box-shadow: 15px 15px 20px #8b0163, inset 15px 15px 20px #630046;
Примеры box-shadow
Чтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок!
Легкая тень
box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
Эффект бумаги
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 0, 0, .1);
Несколько слоев
box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3;
Тройная рамка
box-shadow: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4);
Уголки
box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;
Как видите, свойство box-shadow предоставляет огромное поле для фантазии. Вы можете преображать блоки как угодно — главное, иметь чувство меры! ��
В следующей главе вас ждет изучение свойств width и height, определяющих размеры элементов.
Свойство box-shadow
Свойство box-shadow задает тень блоку. В качестве значения свойство принимает 6 параметров, перечисляемые через пробел, либо ключевое слово none , отменяющее тень совсем.
Синтаксис
Параметры
| Параметр | Описание |
|---|---|
| inset | Необязательный параметр. Если он задан, то тень будет внутри контейнера, если не задан — то снаружи. |
| сдвиг по x | Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное — влево. |
| сдвиг по y | Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное — вверх. |
| размытие | Задает размытие тени. Чем больше значение — тем более размытой будет тень. Необязательный параметр. Если не задан — тень будет четкой. |
| размер тени | Задает размер тени. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Необязательный параметр. Если не задан — тень будет такого же размера, что и элемент. |
| цвет | Задает цвет тени в любых единицах для цвета. Необязательный параметр. Если не задан — цвет тени совпадает с цветом текста. |
Смещения по осям, размытие и размер тени задаются в любых единицах для размеров, кроме процентов.
Пример
В данном примере тень сдвинута вниз и вправо и добавлено небольшое размытие:
Пример . Четкая тень
В данном примере тень сдвинута вниз и вправо, но размытия нет (тень будет четкой):
Пример . Равномерная тень
В данном примере тень не сдвинута, но к ней добавлено размытие:
Пример . Размер тени
В данном примере тень не сдвинута, размытие равно нулю, но к ней добавлен размер (черное — это граница, красное — это тень):
Пример . Размытие + размер тени
В данном примере тень не сдвинута, но к ней добавлены размытие и размер (черное — это граница, красное — это тень):
Пример . Внутренняя тень
В данном примере тень находится внутри контейнера:
Смотрите также
- свойство text-shadow ,
которое задает тень тексту
box — shadow
Свойство, с помощью которого можно задать блоку тень.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как пишется
- Как понять
- Подсказки
- На практике
- Никита Дубко советует
- Алёна Батицкая советует
- Татьяна Фокина советует
Контрибьюторы:
Обновлено 6 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство, бросающее тень на ваши блоки ��
Создано, чтобы имитировать объекты реального мира и создавать иллюзию объёма для плоских элементов интерфейса.
Пример
Скопировать ссылку «Пример» Скопировано
Частая ситуация — выделить кнопку, задав ей тень, что визуально сделает её объёмной.
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
Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius , то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.
Синтаксис
Значения
none Отменяет добавление тени. inset Тень выводится внутри элемента. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр. размытие Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой. растяжение Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент. цвет Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.
Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.
HTML5 CSS3 IE Cr Op Sa Fx
box-shadow Результат примера показан на рис. 1.
Рис. 1. Вид тени в браузере Safari
Браузеры
Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают свойство -webkit-box-shadow .
Firefox до версии 4.0 поддерживает свойство -moz-box-shadow .
Internet Explorer до версии 9.0 не поддерживает свойство box-shadow , взамен можно использовать нестандартное свойство filter :
filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);Здесь: offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.
Применение фильтра dropshadow дает четкую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow .
filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.