Тень от текста с помощью CSS

Вместе с внедрением в новые браузеры новых форматов CSS (а именно CSS 3.0), стало популярно использование эффекта тени от текста (text-shadow). В этом уроке приведу пару примеров использования и реализации этого эффекта.

В своей простейшей форме тень выглядит следующим образом:

 
h3 {text-shadow: 0.1em 0.1em #333}

Это темно-серая (цвет #333) тень на правой (0.1em) и нижней (0.1em) стороне от текста. Результат выглядит следующим образом:

Простейший вид свойства «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}

На практике, цвета фона и текста практически идентичны (#CCCCCC и #D1D1D1), поэтому нет теней, а виден лишь едва заметный контраст.

Используя четыре тени от шрифта можно получить эффект сплошного контура:

 
h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

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

 
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}