2.18. CSS3 тень блока

css3_shadowsСвойство box-shadow добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.

Как сделать тень блока с помощью свойства box-shadow

Поддержка браузерами

IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-

1. Синтаксис свойства box-shadow

Каждая тень принимает от одного до пяти параметров: горизонтальное смещение, вертикальное смещение, радиус размытия (необязательное значение), радиус распространения (необязательное значение) и цвет тени. Тени не влияют на компоновку и могут перекрывать соседние элементы или их тени. Свойство не наследуется.

box-shadow

Рис. 1. Синтаксис свойства box-shadow
box-shadow
Значения:
x-offset Обязательное значение. Смещение тени по горизонтали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вправо от блока, отрицательное – влево.
y-offset Обязательное значение. Смещение тени по вертикали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вниз, отрицательное — вверх.
blur Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень. Можно использовать только положительные значения.
растяжение Необязательное значение, расширяет тень, утолщая ее сплошную часть между размытыми краями. Принимает как положительные, так и отрицательные значения, задаётся в единицах длины — px и т.д.
цвет Необязательное значение. По умолчанию тень черного цвета. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha). Для Safari цвет тени указывать обязательно.
inset Создаёт тень внутри блока.
none Значение по умолчанию, означает отсутствие тени.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

2. Примеры тени для блока

2.1. Внутренняя тень

2.2. Плоская тень с одной стороны

flat

2.3. Тень в стиле «материальный дизайн»

3. Эффекты для тени при наведении

See the Pen xRwqWo by Elena (@html5book) on CodePen.

4. Анимация тени

See the Pen YpypeE by Elena (@html5book) on CodePen.

  • Создание Сайтов

    Вот в начале указано что в осле box-shadow не работает. Краем уха слышал, что box-shadow можно для ие заменять каким-то способом но не картинками. Что это за способ? или это очередные форумкские байки?

    • Есть CSS3 PIE (http://css3pie.com) — дополнительный модуль для IE 6-9, который добавляет поддержку закруглённых углов, теней, градиента и т.д. Модуль выполнен в виде файла с расширением .htc, который подключается в CSS-объявлении через свойство behavior.

      • Создание Сайтов

        Вот, вроде бы про эти костыли box-shadow для Ие я и слышал. Благодарю Елена!