2.17. CSS3 тень текста

css3-text-shadowСвойство text-shadow используется для добавления тени к тексту. Тень текста — интересный инструмент, который позволяет создавать удивительные эффекты. Тени могут быть однослойными или многослойными, размытыми, цветными или полупрозрачными. Задавая тень для элемента, можно указывать только одно значение длины и цвет, таким образом создавая цветную копию отдельного символа или слова.

Как сделать тень для текста

Поддержка браузерами

IE: 10.0
Edge: 12.0
Firefox: 3.5
Chrome: 4.0
Safari: 4.0
Opera: 10.1
iOS Safari: 3.2
Android Browser: 2.1
Chrome for Android: 55.0

1. Синтаксис свойства text-shadow

Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.

Каждая тень определяется двумя или тремя значениями длины (третье значение является обязательным) и цветом (необязательное значение). Если цвет тени не указан, используется цвет текста.

Первая длина задаёт смещение по оси Х, вторая — смещение по оси Y. Если значения длин отрицательные, то тень смещается влево и вверх от текста.

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

text-shadow-syntax

Рис. 1. Синтаксис свойства text-shadow
text-shadow
Значения:
x-offset Обязательное значение. Смещение тени по горизонтали относительно текста. Может принимать как положительные, так и отрицательные значения.
y-offset Обязательное значение. Смещение тени по вертикали относительно текста. Может принимать как положительные, так и отрицательные значения.
blur Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень.
цвет Необязательное значение. По умолчанию принимает цвет текста. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha).
none Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

2. Примеры тени для текста

2.1. Плакатная тень

Тень текста

2.2. 3D тень

Тень текста

2.3. Тень-текст

Тень текста

2.4. Ретро-тень

Тень текста

2.5. Многослойная тень

Тень текста

2.6. Прозрачная тень

Тень текста

2.7. Тень-зебра

Тень текста

2.8. Неоновая тень

Тень текста

2.9. Тень-обводка

Тень текста

2.10. Стиль LETTERPRESS

Тень текста

2.11. Стиль ТВИТТЕР

Тень текста

2.12. Тень с обводкой

Тень текста

3. Эффекты для тени при наведении

See the Pen ENjrvy by Elena (@html5book) on CodePen.

See the Pen yVYOdY by Elena (@html5book) on CodePen.

4. Анимация тени

See the Pen jVbqZo by Elena (@html5book) on CodePen.

See the Pen NbGNBm by Elena (@html5book) on CodePen.

See the Pen dOYMrd by Elena (@html5book) on CodePen.