Затенение текста

CSS2 включает свойство для создания отбрасываемой текстом тени, но в CSS2.1 это свойство не перешло, потому что ни один броузер не реализовал полной его поддержки на момент завершения CSS2.1. Отсутствие реализации затенения в спецификации станет более понятным, когда вы поймете, что необходимо сделать, чтобы заставить веб-броузер определять контуры текста элемента и затем вычислять одну или несколько теней, которые должны накладываться друг на друга, не перекрывая сам текст.

Очевидно, что по умолчанию затенение текста отсутствует. В противном случае теоретически возможно определить одну или несколько теней. Для каждой тени задаются цвет и три длины. Параметр color, конечно же, задает цвет тени, так что можно сделать тени зелеными, фиолетовыми или даже белыми. Первые два значения длины определяют смещение тени по отношению к тексту, а необязательное третье значение – радиус размытия тени. Чтобы создать зеленую тень, смещенную относительно текста на пять пикселов вправо и на 0,5 em вниз без размытия, следует написать: text-shadow: green 5px 0.5em; Если значения длин отрицательные, тень смещается влево и вверх от текста.

Радиус размытия определяется как расстояние от контура тени до края эффекта размытия.


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

p.cl1 {color: black; text-shadow: silver 2px 2px 2px;}
p.cl2 {color: white; text-shadow: 0 0 4px black;}
p.cl3 {color: black; text-shadow: 1em 1em 5px gray, -1em -1em silver;}

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
В середине
Вертикальное выравнивание текста
Выравнивание по базовой линии
Выравнивание по верхнему краю
Выравнивание по заданному расстоянию

Вернуться в раздел: CSS / 6. Свойства текста