Всё что вы хотели знать про box-shadow

Как несложно догадаться из названия статьи речь пойдёт о css-свойстве третьей спецификации box-shadow, которое добавляет к блочным элементам тень. Сегодня веб-дизайнеры уже вовсю используют его, даже не смотря на то, что данное свойство поддерживается не всеми браузерами или поддерживается, но неполностью. Итак, для начала разберёмся с правильным написанием данного свойства.

.box 
{
box-shadow:5px 5px 5px 5px #eee inset; 
}

У свойства box-shadow есть четыре числовых значения, которые отвечают за направление и размеры отбрасываемой тени.

Первое значение отвечает за смещение тени по горизонтали (horizontal offset). Причём положительно значение смещает тень элемента вправо, отрицательное — влево.

Соответственно, второе значение отвечает за смещение тени по вертикали (vertical offset): положительное — сместит тень вниз, а отрицательное — вверх.

Третье числовое значение — радиус размытия (blur distance) укажет насколько тень объекта будет размыта. Значение может быть только положительным, либо равным нулю. При нулевом значении тень будет иметь резкие, чёткие края.

Следующее значение (spread distance) растягивает тень во всех четырёх направлениях. Может иметь и отрицательное значение, в этом случае тень сужается на заданный размер. Это значение является необязательным.

Пятое значение задаёт цвет тени, который может быть указан также в виде rgba-модели.

Последний, необязательный параметр, ‘inset’ направляет тень внутрь элемента.

Интересно то, что один блочный элемент может отбрасывать несколько теней одновременно, для этого их параметры нужно указать через запятую. Каждая последующая тень “подкладывается” под предыдущую.

Если блочный элемент имеет скруглённые углы, заданные с помощью CSS3 свойства border-radius, то и тень будет со скруглёнными углами.

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

В ходе написания этой заметки я использовал следующие версии браузеров: Opera 10.60, Safari 5.0, Firefox 3.6.8, Google Chrome 5.0.375.125, Internet Explorer 6-8.

Для Firefox, Safari и Chrome всё ещё требуется добавлять префиксы к свойствам CSS3. Тоесть у нас получится такая запись

.box 
{
box-shadow:5px 5px 5px #eee; //для Opera
-webkit-box-shadow:5px 5px 5px #eee;  //для Safari и Chrome
-moz-box-shadow:5px 5px 5px #eee; //для Firefox
}

Все современные браузеры, к коим я не отношу Internet Explorer версий 6-8, поддерживают данное свойство. Но, не без оговорок. Есть неприятные «баги», которые были обнаружены в ходе работы с box-shadow.

Тени блоков лежат не на одном уровне, тень каждого следующего блока может накрыть предыдущий! Вообще, хотя я отнёс это к «багам», возможно, что разработчиками CSS3 так и задумывалось, потому что такое поведение наблюдается во всех браузерах, поддерживающих box-shadow.

Браузеры Safari, Firefox и Chrome не отрисовывают тень у элементов формы пока тем явно не указать рамку (border) и фоновый цвет.

Браузер Opera не поддерживает box-shadow для элементов формы, если указан параметр ‘inset‘ (внутренняя тень).

Google Chrome сильно “косячит” с отображением внутренней тени у блока с закруглёнными углами (border-radius). Весьма странно, что в Safari, хотя он и работает с Chrome на одном движке, таких проблем не наблюдается.

В Safari радиус размытия (blur distance) у тени визуально значительно меньше, чем в других браузерах.

В Opera наблюдается “косяк” с отображением тени, появляющейся при наведении курсора на элемент (:hover). К счастью, частично это можно исправить указав изначально прозрачную тень, но даже в этом случае тень отрисуется далеко не идеально.

.box 
{
box-shadow:5px 5px 5px rgba(0,0,0,0); 
}
.box:hover
{
box-shadow:5px 5px 5px #eee; 
}

В Mozilla Firefox, у тела документа (body) появится горизонтальная прокрутка с увеличением радиуса размытия тени, размер тени как бы добавляется к ширине самого блока. Хотя на самом деле этого не происходит, понимаю, что мои слова могут запутать, но так оно и есть.

Box-shadow для Internet Explorer

Internet Explorer не поддерживает свойство box-shadow, но если покопаться в памяти или в документации можно вспомнить про фильтры, коих в IE множество. Есть и такой как DXImageTransform.Microsoft.Shadow, у которого в качестве параметров устанавливается цвет, направление (в градусах) и интенсивность. Интенсивность — это подобие радуса размытия. Конечно, такого качества тени как в современных браузерах мы не добьёмся, она будет выглядеть более квадратно, я бы даже сказал «топорно», да и внутри блока тень таким образом не сделать, но всё же это лучше чем совсем ничего. Вот пример, где тень у блока падает со всех четырёх сторон:

.ie {
background:red;
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=5);
}

Стоит обратить внимание на несколько важных деталей.

1. Размеры блока увеличиваются на размер тени. Поэтому разработчику придётся попыхтеть над позиционированием блоков.
2. Фильтры в IE — это дополнительная нагрузка для браузера и как следствие — «тормоза».
3. Для блока с тенью обязательно нужно указать фоновый цвет.

Исходя из всех перечисленных «минусов», стоит задуматься, возможно, использование фоновых картинок будет более уместным, эстетичным и более гибким решением.

И чтобы не заканчивать на грустной ноте, скажу, что в новой, девятой версии Internet Explorer, которая выйдет в 2011 году, поддержка box-shadow будет.

Смотреть примеры