SeoDiz.Ru › Веб-дизайн › Кроссбраузерный text-shadow эффект с помощью CSS

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

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

Любителям же бесплатного софта могу предложить CCleaner скачать бесплатно русская версия, наверняка он вам пригодится, тем более на родном русском языке.

Надеюсь статья Текст с тенью CSS оказалась вам полезна...
Успешного вам блоггинга и до новых встреч!
С наилучшими пожеланиями, Сергей (aka SeoDiz)