Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Параметры тени у текста

Параметры тени у текста

Любителям все украшать стандарт CSS 3 предлагает одну очень интересную возможность — создание тени у текста. При умеренном употреблении она может заметно оживить Web-страницу.

Параметры тени задает атрибут стиля text-shadow:

text-shadow: none | <цвет> <горизонтальное смещение><вертикальное смещение> [<радиус размытия>]

Значение none (установленное по умолчанию) убирает тень у текста.

Цвет тени задается в виде RGB-кода или именованного значения.

Горизонтальное смещение тени задается в любой единице измерения, поддерживаемой CSS (см. табл. 8.1). Если задано положительное смещение, тень будет расположена правее текста, если отрицательное — левее. Можно также задать и нулевое смещение; тогда тень будет располагаться прямо под текстом. Нулевое смещение имеет смысл только в том случае, если для тени задано размытие.

Вертикальное смещение тени также задается в любой единице измерения, поддерживаемой CSS. Если задано положительное смещение, тень будет расположена ниже текста, если отрицательное — выше. Можно также задать и нулевое смещение; тогда тень будет располагаться прямо под текстом.

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

Пример:

H1 { text-shadow: black 1mm 1mm 1px }

Здесь мы задали для заголовков первого уровня (тега <H1>) тень, расположенную правее и ниже текста на 1 мм и имеющую радиус размытия 1 пиксел.

Оглавление книги