Главная / Веб дизайн и фотошоп / Тень от текста с помощью CSS

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

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

text-shadow

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

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

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

Текст с тенью 1

Размытые тени от текста

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

Неоновый зеленый текст

Красный неоновый текст

Синий текст с неоновым сиянием

6 комментариев

  1. Александер

    Сам эффект тени очень полезен, но если исспользовать с умом — например, статья с таким эффектом врятли будет читабельной:)

  2. Т.е. с IE совсем никак? А может есть способ выделить текст, не переводя его в графику?

  3. А есть ли возможность реализовать подобное для IE? Надо текст как-нить выделить, css3 насколько я знаю старыми версиями IE не поддерживается…

  4. Я так долго мучился а на сомом деле так легко.. спасибо. Я искал только свечение ну а остальное тоже может пригодится 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

4 + девять =