CSS: text-shadow // Mash
Существует несколько способов создания теней для текста. Вот некоторые из них.
1. Нарисовать в графическом редакторе

Достоинства и недостатки такого способа понятны.
2. «Стандартный» путь
Говорят, что конструкция
SPAN.glow {
background: white;
color: white;
text-shadow: black 0px 0px 5px;
}
должна работать следующим образом:
К сожалению, в настоящее время браузеры «идут в сад».
3. Фильтры
Достаточно мощная вещь, но «в сад идут» стандарты и работает только в IE.
IE DropShadow filter
4. CSS: позиционирование боксов
Самый хороший, на мой взгляд, способ.
TEXT and SHADOW. Пример текста с тенью.TEXT and SHADOW. Пример текста с тенью.
HTML:
<p class="h1">TEXT and SHADOW. Пример текста с тенью.
<span>TEXT and SHADOW. Пример текста с тенью.</span></p>
CSS:
.h1 {
text-align: left;
font-size: 36px;
line-height: 36px;
font-family: Georgia, serif;
font-weight: bold;
position: relative;
color: #999;
}
.h1 span {
position: absolute;
top: -4px;
left: -3px;
padding-right: 3px;
color: #000;
}

Позиционируем содержимое тэга <span>
относительно параграфа со смещением на 4px вверх и 3px влево. Величину padding-right
задаём равной смещению влево, иначе возможна ситуация, когда тень «обгонит» текст.
Так как дублирование текста — не самый лучший вариант для пользователей текстовых или устаревших браузеров, то «дубль» рекомендуется добавлять скриптами (javascript или определять браузер посетителя на стороне серевера).
5. CSS: генерируемое содержимое
Следующие два примера отнюдь не лучше предыдущего, просто мне было интересно поиграть свойствами :before
и :after
.
Отличия: не работают в IE; в качестве «дубля» выступает значение атрибута, таким образом исключаем повтор текста в «академическом дизайне», хотя пользователь и получит при этом лишние байты.
TEXT and SHADOW. Пример текста с тенью.
HTML:
<p class="h2">TEXT and SHADOW. Пример текста с тенью.
<span title="TEXT and SHADOW. Пример текста с тенью.">
</span></p>
CSS:
.h2 {
text-align: left;
font-size: 36px;
line-height: 36px;
font-family: Georgia, serif;
font-weight: bold;
position: relative;
color: #000;
}
/* Дальше IE уже ничего не увидит, ему отдаём
текст без тени */
html>body .h2 {color: #999;}
.h2 span {
position: absolute;
left: -3px;
top: -4px;
padding-right: 3px;
color: #000;
}
.h2 span:after {
content: attr(title);
}
А теперь сделаем две тени:
SHADOWS
HTML:
<p class="h3" title="TEXT and SHADOWS">TEXT and SHADOWS</p>
CSS:
.h3 {
font-size: 36px;
font-style: italic;
line-height: 36px;
font-family: Georgia, serif;
font-weight: bold;
color: #000;
}
/* Дальше IE уже ничего не увидит, ему отдаём
текст без теней */
html>body .h3 {color: #999;}
.h3:after {
content: attr(title);
color: #000;
display: block;
margin-top: -40px;
/*
-76px для двухстрочного текста,
-112px для трёхстрочного
и т.д. (шаг = line-height)
*/
margin-left: -3px;
}
.h3:before {
content: attr(title);
color: #ccc;
display: block;
margin-bottom: -40px;
/*
значение также зависит от
количества строк
*/
margin-left: 3px;
}
Недостаток последнего способа: жёсткое позиционирование генерируемого содержимого, зависящее от количества строк в тексте.
17 сентября 2003
Ссылки по теме:
- W3C, CSS2 Specification: Text shadows: the 'text-shadow' property
- MSDN: Visual Filters and Transitions Reference
- Douglas Bowman: Making the Absolute, Relative