Просмотров: 849

CSS3. Как сделать тень для текста. Свойство text-shadow.

С введением модуля CSS3 «CSS Text Decoration Module Level 3» (модуль оформления текста уровень 3)

http://www.w3.org/TR/css-text-decor-3/

появилась возможность добавлять тень для текста на веб-страницах.

Это стало возможным с помощью свойства text-shadow.

10-05-2013 19-30-42

Значение по умолчанию: none.

Применяется: ко всем элементам.

Наследуется: да

Проценты: не используются

Синтаксис здесь следующий:

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

none – убирает тень, текст отображается стандартно.

[смещение по горизонтали] – положительное значение смещает тень вправо, отрицательное влево.

[смещение по вертикали] — положительное значение смещает тень вниз, отрицательное вверх.

[радиус размытия] – необязательный параметр. Значение по умолчанию 0. Чем большее значение будет задано, тем сильнее будет эффект размытия тени.

[цвет тени] – необязательный параметр. Если его не указать, то тень будет черного цвета.

Давайте рассмотрим простой пример:

<p style="text-shadow:2px 10px 3px #000; font-size:24px">Текст с тенью</p>

10-05-2013 19-30-42

Можно указывать несколько теней:

<p style="text-shadow:2px 10px 2px #000, 3px 5px #c00; font-size:24px">Текст с тенью</p>

10-05-2013 19-31-38

Каждая тень отделяется друг от друга запятой.