СSS - полезности

Справочник: http://www.htmlbook.ru

И отдельные приемы:

Тени текста

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

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

(Еще не все браузеры августа 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}

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

Тени можно сделать более читаемыми, если контраст между передним слоем и задним слоем небольшой. Вот пример белого текста на бледно-голубом фоне, сначала без тени, а затем с тенью:
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

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

Вы также можете создать более, чем одну тень. В целом это выглядит довольно странно:
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
   -0.3em 0.1em 0.1em #060,
   0.4em -0.3em 0.1em #006}

Но при помощи двух правильно расположенных темной и светлой теней эффект будет полезным:
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Это немного опасно, так как вы можете видеть, поддерживает ли ваш браузер '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}

http://www.indeep76.com/Style/Example007/text-shadow.html