Тень в CSS3 (box-shadow)

Другие статьи:

Спецсимволы в html
30 ноября 2011
Как убрать пунктирную рамку вокруг ссылок?
30 июля 2011
Всплывающие изображения без JavaScript
28 мая 2011
Текст и тень, тень в CSS3 — text-shadow в CSS3
13 марта 2011

Достаточно простой способ добавить тень от объекта используя CSS3, для этого воспользуемся свойством box-shadow

Синтаксис:

box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

none — отменяет добавление тени (если унаследована тень от родительского элемента);
insert — тень будет выводится внутри элемента (тень внутри);
сдвиг по x — смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево;
сдвиг по y — смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх;
размытие — задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой;
растяжение — положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент;
цвет — цвет тени, по умолчанию тень черная.

Разрешается указывать несколько теней, разделяя их параметры между собой запятой. Порядок отображения: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.

Поддерживается в браузерах:

Firefox 3.5+
Opera 10.5+
Chrome 1.0+
Safari 3.0+
Internet Explorer 9+

Safari до версии 5.1, Chrome до версии 10.0 и iOS поддерживают свойство -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 — смещение тени в пикселях;

Пример использования

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a blandit urna.

.shadow {
  background: #fe0; /* Цвет фона */
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
  box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
  padding: 10px; /* Отступы от краев */
  width:200px; /* Ширина */
}
...
<div class="shadow"&rt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a blandit urna.</div&rt;

По материалам htmlbook.ru