Домой Веб дизайн и фотошоп Тень от текста с помощью CSS

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

Автор

Дата

Категория

Вместе с внедрением в новые браузеры новых форматов CSS (а именно CSS 3.0), стало популярно использование эффекта тени от текста (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}

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

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

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

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

Новое

Яндекс: мой нелюбимый поисковик

В настоящее время лидером поискового Рунета остается Яндекс. Каждый день его посещают порядка 15 миллионов человек. Яндекс имеет доступ к более 10...

Как монетизировать SEO трафик?

Давайте возьмем за пример этот блог. Как видите тематика SEO, сайтостроение, монетизация блогов и сайтов, продвижение в поисковых системах и вытекающие...

Не большой отчет по заработку на gogetlinks

Сегодня я бы хотел коснуться темы заработка на бирже вечных ссылок gogetlinks, а также предоставить не большой отчет по работе с...

Как продавать ссылки минимум за 200 рублей!

Решил описать способ, которым пользуюсь сам, когда деньги нужны не так срочно, можно инвестировать свое время и получить с продажи одной...

Обналичиваем чек Adsense в Украине через Приват 24

Как же получить деньги по чеку Adsense в Украине быстрее всего ? Да очень просто, если это делать через систему Приват 24. Обналичивание чека...

Популярное

Как продавать ссылки минимум за 200 рублей!

Решил описать способ, которым пользуюсь сам, когда деньги нужны не так срочно, можно инвестировать свое время и получить с продажи одной...

Яндекс: мой нелюбимый поисковик

В настоящее время лидером поискового Рунета остается Яндекс. Каждый день его посещают порядка 15 миллионов человек. Яндекс имеет доступ к более 10...

Как монетизировать SEO трафик?

Давайте возьмем за пример этот блог. Как видите тематика SEO, сайтостроение, монетизация блогов и сайтов, продвижение в поисковых системах и вытекающие...

Не большой отчет по заработку на gogetlinks

Сегодня я бы хотел коснуться темы заработка на бирже вечных ссылок gogetlinks, а также предоставить не большой отчет по работе с...

Обналичиваем чек Adsense в Украине через Приват 24

Как же получить деньги по чеку Adsense в Украине быстрее всего ? Да очень просто, если это делать через систему Приват 24. Обналичивание чека...
×