Тень в 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*/