Создание тени для текста и других текстовых эффектов при помощи CSS

Создание тени для текста - свойства CSS
Рис. 1. Создание тени для текста - свойства CSS

Сделать ваши страницы, более красочными, можно не только при помощи различных шрифтов (о том как, это сделать, отдельная статья), но и при помощи свойства CSS "text-shadow". Какой параметр свойства, изменяет тот или иной эффект тени, показано на рисунке 1.

Первый параметр отвечает за смещение тени по оси X - смещение по горизонтали. Значение параметра может быть как положительное (смещает тень вправо от текста), так и отрицательное (смещает тень влево от текста).

Аналогично первому, второй параметр отвечает за смещение тени по оси Y - смещение по вертикали. Значение параметра может быть как положительное (смещает тень ниже текста), так и отрицательное (смещает выше текста).

Третий параметр определяет радиус размытия тени и имеет только положительно значение.

Четвертый параметр, указывает цвет тени, он может, как совпадать с цветом шрифта (текста), так и отличаться.

А теперь наглядные, но далеко не полные¹ примеры по использованию свойства - text-shadow:

¹ Это всего лишь некие шаблоны, так как менять параметры свойства, вы можете по собственному желанию, как сами размеры тени, так и её цвет

1. Простая тень для текста

Простая тень для текста на CSS

Значения text-shadow:

{font:23.0pt verdana;text-shadow:2px 2px 2px #48577D; color:#7690CF;}

2. Стиль выгравированного текста

Стиль выгравированного текста

Значения text-shadow:

{font:23.0pt verdana;text-shadow:0px 3px 0px #666;color:#666;}

3. Светящийся текстовый эффект

Светящийся текстовый эффект

Значения text-shadow:

{font:23.0pt verdana;text-shadow:0 0 20px #00FF00;color:#FAF4E8;}

4. Размытый текст

Размытый текст

Значения text-shadow:

{font:23.0pt verdana;color: ccc;text-shadow: 0 0 7px #333;}

5. Использование нескольких теней. (Можно указать несколько теней для текста, разделяя значения запятыми)

Использование нескольких теней

Значения text-shadow:

{font:23.0pt verdana;color: F2B405;text-shadow: 0 0 4px #000, 0 -2px 4px #F27405, 2px -5px 6px #FF0000, 4px -7px 10px #DCDCDC, 6px -10px 12px #000;}

6. Рельефный текст

Рельефный текст

Значения text-shadow:

{font:23.0pt verdana;color:#ccc;text-shadow: -1px -1px #FFF, 1px 1px #333;}

7. Граница вокруг текста

Граница вокруг текста

Значения text-shadow:

{font:23.0pt verdana;color:#7FCAEB;text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000; 1px 1px #000;}

8. Текст в стиле 3D. (Цвет тени не меняется, меняются только границы тени)

Текст в стиле 3D

Значения text-shadow:

{font:23.0pt verdana;color:#808080;text-shadow: 2px 2px #808080, 3px 3px #808080, 4px 4px #808080, 5px 5px #808080}