IMfO.ru

All God’s chillun got shoes

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