специи по вкусу

ВЯЧЕСЛАВ БАЕВ

Спецвыпуск: Хакер, номер #073, стр. 073-010-7

[решение.]

Существует несколько способов создания теней для текста. Вот некоторые из них.

1 Нарисовать в графическом редакторе.

Достоинства и недостатки такого способа очевидны.

2 «Стандартный» путь.

ЛИСТИНГ

SPAN.glow {

background: white;

color: white;

text-shadow: black 0px 0px 5px;

}

Говорят, что эта конструкция должна работать, но, к сожалению, в настоящее время браузеры «идут в сад».

3 Фильтры.

Достаточно мощная вещь, но «в сад идут» стандарты, а реально работает только в IE.

ЛИСТИНГ

IE DropShadow filter

4 CSS: позиционирование боксов. Самый удобоваримый способ.

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

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);

}

А теперь сделаем две тени.

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;