Posted on By seodiz_baza_

Кроссбраузерный text-shadow эффект с помощью CSS

text-shadow эффект в дизайне сайта

Посещая разные интернет ресурсы на некоторых вы наверно видели эффект отбрасывания текстом тени, или эффект вдавленного текста. Возможно на некоторых сайтах текст представляет собой картинку, а эффект отбрасывания тени сделан в фотошопе.

Но уверен что точно такого эффекта можно добиться с помощью CSS стилей и прочитав эту статью вы узнаете кроссбраузерное решение этой задачи. Главное занимаясь украшательством блога помните про ошибки в дизайне которые ни в коем случае нельза допускать

Стили для Safari 1.1, Firefox 3.5+, Opera 9+ и Chrome

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

.shadow {text-shadow: #666666 5px 5px 5px;}

Текст с тенью в современных браузерах

Стили только для Internet Explorer

.shadow {height: 1em;filter:Shadow(Color=#666666,Direction=135,Strength=5);}

Текст с тенью только в IE/Win

Стили для Internet Explorer и Safari и других современных браузеров

.shadow{text-shadow: #666666 5px 5px 5px;height: 1em;
filter: Shadow(Color=#666666, Direction=135, Strength=5);}

Text-shadow в IE Safari и в современных браузерах

Стили для ранних версий Мозиллы и других браузеров которые понимают псевдоэлемент :before

.shadow {
line-height: 2em;
white-space: nowrap;}
.shadow:before {
display: block;
margin: 0 0 -2.12em 0.15em;
padding: 0;
color: #666666;
}

Text-shadow для Мозиллы и тех которые понимают псевдоэлемент :before

Демонстрация этого примера тут не работает, потому что :before не не работает в inline стилях а только в css

Окончательный кроссбраузерный CSS Text-shadow

.shadow {
height: 1em;
filter: Shadow(Color=#666666, Direction=135, Strength=5);
line-height: 2em;
white-space: nowrap;}
.shadow:before {
display: block;
margin: 0 0 -2.12em 0.15em;
padding: 0;
color: #666666; }
html*.shadow {
[color:red;text-shadow: #666666 5px 5px 5px; ]color:auto; }
.dummyend[id]{clear: both;}
html*.shadow:before {[color:red;display: none; ]color:auto;}
.dummyend[id]{clear: both;}

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

.shadow {text-shadow: #666666 5px 5px 5px;}

А для тех кто хочет поэкспериментировать с различными цветами и вариантами отбрасывания текстом тени вот ссылочка на онлайн генератор валидного text-shadow эффекта.

Читайте также: кроссбраузерность