Каскадные таблицы стилей
CSS советы & приемы

(Эта страничка использует каскадные таблицы стилей CSS)

Данный документ является переводом статьи "Web Style Sheets CSS tips & tricks".
Оригинальная версия документа существует только на сайте W3C http://www.w3.org/Style/Examples/007/text-shadow.html
Данный перевод НЕ является официальным документом W3C.
Все Авторские Права Принадлежат W3C.
Данный документ может содержать ошибки перевода и опечатки.
Автор перевода: Евгений Скрипец, его новый проект Speed Lab. Все переводы автора: en, ru, uk
Локальная версия: http://www.indeep76.com/Style/Example007/text-shadow.html

Тени текста

Смазанные тени текста

Читаемый белый текст

Многослойные тени

Контуры

Неоновое свечение

Тени текста

Уровень 3 CSS   обладает свойством 'text-shadow' для добавления тени на каждую букву любого текста. В своей простейшей форме это выглядит так:

h3 {text-shadow: 0.1em 0.1em #333}

что добавляет темно-серую (#333) тень немного вправо (0.1em) и вниз (0.1em) относительно нормального текста. Результат выглядит следующим образом:

The noak and the barcicle

(Еще не все браузеры августа 2005 полностью поддерживают 'text-shadow'. Данный выше пример должен работать как минимум на Safari и Konqueror.)

Смазанные тени текста

Простейшая форма свойства 'text-shadow' имеет две части: цвет (как #333 выше) и отступ (0.1em 0.1em в примере, данном выше). Это приводит к резкой тени на видимом отступе. Но отступ может также сделать смазанным, что приведет к более или менее смазанной тени.

Степень размытости представлена, как другой отступ. Вот две линии, одна с небольшой размытостью (0.05em) и вторая - с большей (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

“What do you say?” said the UK

In order to see more clearly

Читаемый белый текст

Тени можно сделать более читаемыми, если контраст между передним слоем и задним слоем небольшой. Вот пример белого текста на бледно-голубом фоне, сначала без тени, а затем с тенью:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Без тени:

What is in it for me?

С тенью:

With a shovel and some oranges

Многослойные тени

Вы также можете создать более, чем одну тень. В целом это выглядит довольно странно:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

I wish wish wish…

Но при помощи двух правильно расположенных темной и светлой теней эффект будет полезным:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

I, Augustus (you know who)

That's extra, of course

Это немного опасно, так как вы можете видеть, поддерживает ли ваш браузер 'text-shadow'. Фактически цвета фона и текста в этом примере практически одинаковы (#CCCCCC и #D1D1D1), так что без теней не было никакого контраста.

Рисование букв и контуров

Пример с двумя тенями предыдущей версии можно использовать и далее. При помощи четырех теней, буквам можно задать контуры:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Are you feeling red?

A cat, an apple, etcetera

Это не лучший контур, и в настоящее время (август 2005)продолжается дискуссия о том, должен ли CSS обладать отдельным свойство (или, возможно, переменную для 'text-decoration') для того, чтобы делать лучшие контуры.

Неоновое свечение

Если вы помещаете смазанную тень прямо под текстом, то есть с нулевым отступом, эффект состоит в том, чтобы создать свечение вокруг букв. Если свечение одной тени недостаточно интенсивное, просто повторите такую же тень несколько раз:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Документ создан 4 Aug 2005;
Последнее изменение $Date: 2007/07/20 16:18:41 $ GMT