Как сделать тень в CSS? Достаточно нескольких свойств и красивая тень украсит вашу страничку. Используйте свойства CSS text-shadow или box-shadow, в зависимости от того какой элемент вы хотите украсить.

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

Тень текста - кроссбраузерный вариант

Синтаксис

.shadow-text {
text-shadow:  #777 2px 2px 5px; /* цвет тени, смещение по x, смещение по y, степень размытия */
-webkit-text-shadow: 2px 2px 5px #777; /* Для устаревших Safari, Chrome и iOS */ 
-moz-text-shadow: 2px 2px 5px #777; /* Для древнего Firefox */
filter: Shadow(Color=#777777, Direction=45, Strength=2); /* Для IE */
}

Пример (стиль .shadow-text):

Тень текста с помощью CSS

Свойство text-shadow поддерживают следующие браузеры: Firefox 3.1+, Google Chrome 2+, Opera 9.5+ и Safari 3+. О более ранних версиях этих браузеров можно не беспокоиться, во-первых пользователи этих браузеров регулярно их обновляют, а во-вторых доля устаревших версий достаточно мала.
Как всегда Internet Explorer отличился, свойство text-shadow он будет понимать только с 10-ой версии и то слава богу, а пока можно использовать filter: Shadow. Но качество теней в IE оставляет желать лучшего, можно им просто пренебречь. На современных браузерах все будет отображаться красиво, а пользователи устаревших версии и IE даже не узнают о том, что там должна быть тень :)

Двойная тень текста - простая валидная запись

Синтаксис

.shadow-text-double {
text-shadow:4px 4px 10px #FFDD33, 1px 1px 1px #D50000;
}

Пример (стиль .shadow-text-double):

Двойная тень текста
свойство text-shadow

Вы можете использовать несколько теней на одном элементе для этого укажите свойства через запятую.


Тень блока

Чтобы задать тень для блока используйте свойство CSS 3 box-shadow

Синтаксис

.shadow-box {
box-shadow: #969696 2px 4px 12px; /* цвет тени, смещение по x, смещение по y, степень размытия */
-webkit-box-shadow: 2px 4px 12px #969696; /* Для устаревших Safari, Chrome и iOS */
-moz-box-shadow: 2px 4px 12px #969696; /* Для древнего Firefox */
filter: progid:DXImageTransform.Microsoft.dropshadow(offX=2, offY=4, color=#969696); /* Для IE */
}

Пример (стиль .shadow-box):

Тень блока с помощью CSS - свойство box-shadow

Чтобы сделать тень жесткой задайте нулевую степень размытия или просто не задавайте это значение.

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

Особенно стильно смотрятся блоки с тенью со скругленными углами с использованием свойства border-radius. Скругление углов в CSS

Вернуться в раздел: Блог