Тень в CSS3. Как сделать тень в CSS3 для блока (div)

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

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

Значения свойства box-shadow:

				
					box-shadow: inset 5px 5px 10px 3px #ccc;

На данном примере показано свойство box-shadow со всеми возможными значениями, каждое значение имеет свою идентификацию:

Ключевое слово inset устанавливает тень внутри элемента;
Сдвиг тени по горизонтали (5px — вправо, -5px — влево);
Сдвиг по вертикали (5px — вниз, -5px — вверх);
Радиус размытия тени (0 — резкая тень);
Растяжение тени (5px — растяжение, -5px — сжатие);
Цвет тени.

Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета. За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней.

Для того чтобы тень работала во всех браузерах, используйте значение CSS со следущими свойствами:

				
					box-shadow:                inset 5px 5px 10px 3px #ccc;
-webkit-box-shadow:   inset 5px 5px 10px 3px #ccc;  /*Для Safari и Chrome*/
-moz-box-shadow:       inset 5px 5px 10px 3px #ccc;  /*Для Firefox*/

Полезные ссылки

Контакты