text-shadow

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

Картинка без тени для текста
Изображение без тени для текста
Тонкие текстовые тени
Изображение с тенью для текста

Чтобы сделать тень для текста, в CSS нужно добавить четыре параметра:

  1. цвет тени для текста
  2. смещение тени по оси х
  3. смещение тени по оси у
  4. радиус размытия тени

например:

text-shadow: #FFFFFF .5px 1px 0;

Тени для текста смещение по оси х:

.shadow1 { 
   color: black; 
   text-shadow: 2px 2px; 
}
example of text-shadow: 2px 2px;
Смещение текста по оси х

Добавить тень для текста:

.shadow2 { 
    color: black; 
    text-shadow: #87CEEB 1px 3px; 
}
example of text-shadow: #87CCEB 1px 3px;
Простая тень для текста

Параметр цвета можно указывать как в начале так и в конце. Радиус размытия использует алгоритм размытия по Гауссу:

.shadow3 { 
    color: black; 
    text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); 
}
example of text-shadow: 1px 3px 3px rgba(153, 204, 255, 1);
Радиус размытия тени для текста

Добавить расстояние тени вокруг текста:

.shadow4 { 
    color: black; 
    text-shadow: skyblue 0px 0px 0px 4px; 
}
example of text shadow: skyblue 0px 0px 0px 4px;
Расстояние тени вокруг текста

Расстояние тени с положительными и отрицательными значениями:

.shadow4_nospread {
   color: black;
   text-shadow:
   skyblue 0px 2px,
   skyblue 2px 0px,
   skyblue -2px 0px,
   skyblue 0px-2px,
   skyblue -1.4px -1.4px,
   skyblue 1.4px 1.4px,
   skyblue 1.4px-1.4px,
   skyblue -1.4px1.4px;
}
example of multiple shadows used to simulate spread-distance
Тени для текста с положительным и отрицательным значением

такая разметка сложная и может привести к не желательному результату.


Красивый эффект тени, которого невозможно добиться без отрицательных значений:

.shadow5 { 
    text-shadow: 5px 5px 2px -2px #9966CC; 
}
example of text-shadow: 5px 5px 2px -2px #9966CC;
Эффект тени для текста с отрицательным значением

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

.shadow6 {
    text-shadow: rgba(255, 255, 255, .5) 1px 1px, yellow 2px 3px, 
                 rgba(255, 153, 0, .7) 3px 6px, 
                 rgba(255, 0, 0, .5) 4px 8px; }
example of multiple text shadows on one string
Наложение слоёв тени

Поддержка

В настоящее время свойства CSS3 text-shadow работают во всех новых браузерах. Но, не все новые версии браузеров поддерживают расстояние тени. В text-shadow расстояние тени для текста позволяет сделать больше эффектов; темные размытые тени или строгие тени.

.shadow7 {
    color: black;
    text-shadow: #99FFCC 0px 0px 10px;
    text-shadow: #99FFCC 0px 0px 10px 10px;
}
example of a string of text with spread support
Расстояние тени для текста

Для старых версий Internet Explorer часто используют альтернативу, фильтры DX ImageTransform, Microsoft Blur. Фильтры могут создать эффект тени для текста. Но, в CSS3 свойство text-shadow обеспечивает значительный прирост производительности по сравнению с альтернативами, за счет аппаратного ускорения.

Таблица поддержки браузерами: “text-shadow”

JavaScript для text-shadow

Если у вас браузер не поддерживает CSS3 text-shadow, используйте функцию обнаружения.

if (typeof document.body.style.textShadow == 'undefined') {
// text-shadow не поддерживается
document.body.style.color = 'black';
}
else {
// text-shadow поддерживается
document.body.style.color = '#FFFFCC';
document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';
}

Примеры text-shadow

Используйте тени для текста уже сегодня! Тонкие значения различных параметров могут создать интересные эффекты.
Галерея интересных эффектов теней для текста:

Заключение

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

Обратите внимание, что можно использовать text-shadow для шрифтов WOFF в сочетании с переходами и анимацией CSS3.