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. Плакатная тень

Тень текста

.text-shadow-1 {
  background: #77F7DE;
  color: white;
  text-shadow: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 white, 5px 5px 0 white, 6px 6px 0 white;
  letter-spacing: 0.1em;
}

2.2. 3D тень

Тень текста

.text-shadow-2 {
  background: linear-gradient(-45deg, #FEE864, #F5965E);
  color: #f4f4f4;
  text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4);
}

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

Тень текста

.text-shadow-3 {
  background: #FFE6DB;
  color: #FFE6DB;
  letter-spacing: .1em;
  text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142, .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1);
}

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

Тень текста

.text-shadow-4 {
  color: #FB631E;
  letter-spacing: .1em;
  text-shadow: 4px 4px white, 6px 6px #D7CC88;
}

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

Тень текста

.text-shadow-5 {
  background: #f1f1f1;
  color: #fcc105;
  letter-spacing: .1em;
  text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2);
}

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

Тень текста

.text-shadow-6 {
  color: transparent;
  text-shadow: 4px -4px rgba(157, 217, 227, .7), -2px -2px rgba(159, 141, 105, .7), 0 2px rgba(254, 216, 21, .7);
}

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

Тень текста

.text-shadow-7 {
  background: #E02A91;
  color: white;
  text-shadow: 2px 2px black, 4px 4px white, 6px 6px black, 8px 8px white, 10px 10px black, 12px 12px white, 14px 14px black, 16px 16px white, 18px 18px black, 20px 20px white, 22px 22px black, 24px 24px white, 26px 26px black;
}

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

Тень текста

.text-shadow-8 {
  background: black;
  color: white;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px crimson, 0 0 35px crimson, 0 0 40px crimson, 0 0 50px crimson, 0 0 75px crimson;
}

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

Тень текста

.text-shadow-9 {
  color: white;
  text-shadow: 1px 1px #732372, 1px -1px #732372, -1px 1px #732372, -1px -1px #732372, 3px 3px 6px rgba(0,0,0,.5);
}

2.10. Стиль LETTERPRESS

Тень текста

.text-shadow-10 {
  background: #F9C941;
  color: #F9C941; 
  letter-spacing: 2px;
  text-shadow: 1px 1px #F3E7CF, -1px -1px #56433D;
}

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

Тень текста

.text-shadow-11 {
  color: #3CF; 
  text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;
}

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

Тень текста

.text-shadow-12 {
  color:#E34C38;
  text-shadow: 1px 1px white, 2px 2px white, -1px -1px white, -2px -2px white, -1px 1px white, 1px -1px white, -2px 2px white, 2px -2px white, -3px -3px 4px rgba(0,0,0,.3), -3px 3px 4px rgba(0,0,0,.3), 3px 3px 4px rgba(0,0,0,.3), 3px -3px 4px rgba(0,0,0,.3); 
}

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.