Посещая разные интернет ресурсы на некоторых вы наверно видели эффект
отбрасывания текстом тени, или эффект вдавленного текста. Возможно на
некоторых сайтах текст представляет собой картинку, а эффект
отбрасывания тени сделан в фотошопе. Но уверен что точно такого эффекта
можно добиться с помощью 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 эффекта.
| 
