Как сделать тень в CSS3

Здравствуйте, уважаемые читатели. Сегодня поговорим о том, как сделать тень в CSS. На сегодняшний день тень в CSS поддерживаются практически всеми популярными браузерами. Исключение является Internet Explorer, что для него неудивительно. Он не понимает свойства text-shadow (тень текста). Свойства тени для объектов на странице прописываются как box-shadow. И давайте перейдем сразу к примерам. Я создал 4 блока и применил к ним разные эффекты тени.

1

 box-shadow: 0px 0px 5px 0; /* Тень с 4 сторон и размытием 5px */

2

 box-shadow: 0px 0px 6px 1px inset; /* Внутренняя тень */

3

 box-shadow: 2px 2px 5px 1px; /* Тень смещена вниз и вправо*/

4

 box-shadow: 3px 3px 5px 0 inset; /* Внутренняя тень смещена вверх и влево*/

Значение тени в CSS

• Первое значение смещает тень по оси Х. Применяются как положительные, так и отрицательные числа
• Второе значение — смещает тень по оси Y
• Третье значение — радиус размытия тени
• Четвертое значение — размер тени
• #222 — Цвет тени
• inset — внутренняя тень

Для каждого браузера нужно прописывать свои значения

box-shadow: 2px 2px 5px 1px; /* Все браузеры */
-webkit-box-shadow: 2px 2px 5px 1px; /* Хром, Сафари */
-mox-box-shadow: 2px 2px 5px 1px; /* FireFox */
-o-box-shadow: 2px 2px 5px 1px; /* Опера */

Демо

Для IE нужно прописывать специальные, отдельные стили, но это тема отдельного разговора, поэтому поговорим об этом в другой раз и про эффекты тени для текста тоже. Данные примеры вы как обычно можете скачать, рассмотреть подробнее и потренироваться.

СКАЧАТЬ