Работа с текстовыми тенями

2014-11-11

Сегодня мы подробно разберём одно свойство CSS3: text-shadow. Если вы уже сталкивались с box-shadow, то заметите, что оба свойства довольно похожи, несмотря на то, что определены в разных модулях. Немного теории, прежде чем перейти к примерам:

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

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

Как text-shadow, так и box-shadow поддерживаются всеми современными браузерами: Chrome 4+, Firefox 3.5+, Safari 4+, Opera 9.6+, IE10+.

Различия между box-shadow и text-shadow

Официальное определение синтаксиса box-shadow:

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

text-shadow:

text-shadow: h-shadow v-shadow blur color|none|initial|inherit;

Различия очевидны: во-первых, вы не можете создать для текста внутреннюю тень. Во-вторых, у text-shadow (пока) нет параметра spread-distance. В обоих случаях вы можете создавать несколько теней, отображаемых одна поверх другой.

Примеры применения text-shadow

Цвет и отступы

В этой серии примеров мы будем варьировать только цвета, горизонтальные и вертикальные отступы теней, чтобы получить довольно оригинальные эффекты:

text-shadow:10px 10px;

text-shadow:-5px -5px; color:blue;

text-shadow:-1px -1px white; color:blue; background:#888;

text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee;

Обратите внимание: положительные значения отступов передвигают тень вправо и вниз, а отрицательные – влево и вверх.

Цвет тени указывать необязательно. Если цвет не указан, он наследуется. Но я бы рекомендовал всегда явно указывать цвет в rgb, rgba или hsla, так как значение по умолчанию может быть разным в разных браузерах.

Размытие

В следующем примере мы поиграем с параметром размытия (blur):

blur – опциональный параметр, он задаёт расстояние для размытия. Его значение должно быть положительным; 0 означает отсутствие размытия. Следующая диаграмма продемонстрирует работу параметра blur:

element {
  text-shadow:5px 5px 3px darkred; color:red;
}

element {
  text-shadow:4px -4px 10px red; color:azure;  background:#333;
}

element {
  text-shadow:0px 0px 4px ;
}

parent {
  color:red;
}

element {
  text-shadow:0px 0px 4px ;
}

parent {
  color:lightgray; background:#333;
}

В первых двух примерах мы манипулировали расстоянием размытия. В последних двух цвет размытия определялся цветом родительского элемента.

Расширение и сжатие

Четвёртый по счёту атрибут spread свойства text-shadow, аналогичный атрибуту с тем же именем свойства box-shadow, пока не включён в стандарт CSS и поддерживается только браузерами Microsoft, начиная с IE10. Этот атрибут можно использовать, чтобы сделать тень от надписи разреженной или сжатой:

text-shadow:5px 5px 0px 3px lightgreen; color:green;

text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;

text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green;  background:#333;

Положительные значения атрибута расширяют тень, отрицательные – сужают. Нулевое значение бывает полезно, чтобы выделить контуры символов, как в третьем примере.

Множественные тени

Как мы уже упоминали, вы можете задать для текста несколько теней:

Простое выделение контуров:

text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta; /* example 1: basic outlining */

text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35),   /* example 2 */
             6px -6px 4px 2px rgba(255,255,255,0.25),
             -3px -3px 4px 6px rgba(255,0,255,0.15);

text-shadow: 0 0 0 3px white,   /* example 3: neon - 1 */
             0 0 2px 6px magenta, 
             0 0 1px 9px white, 
             0 0 6px 12px magenta;
color:magenta;

text-shadow: 0 0 2px #fff,    /* example 4: neon 2 */
             0 0 4px 2px rgba(255,255,255,0.5), 
             0 0 6px 6px #f0f, 
             0 0 4px 7px #fff, 
             0 0 3px 15px #222, 
             -4px 0 2px 9px #f0f, 
             4px 0 2px 9px #f0f, 
             0 -4px 2px 9px #f0f, 
             0 4px 2px 9px #f0f;
color:white;

text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; /* example 5: text underlining */
color:magenta;

Имитация расширения тени символов

Как уже было сказано, атрибут spread для text-shadow не поддерживается всеми браузерами. Возможно, он будет включён в CSS4, а пока его можно имитировать:

text-shadow: 0px 0px 0px 4px magenta;

/* is similar to: */

text-shadow: magenta 0px 2px,  
             magenta 2px 0px,  
             magenta -2px 0px,  
             magenta 0px -2px,  
             magenta -1.4px -1.4px,  
             magenta 1.4px 1.4px,  
             magenta 1.4px -1.4px,  
             magenta -1.4px 1.4px;

Дополнительные примеры

Двойные тени

text-shadow: 0 0 2px 2px white,
             2px 0 2px 5px #222,
             3px 0 3px 6px #933,
             5px 0 2px 14px #222,
             6px 0 5px 16px #533;
background-color:#222;
color:white;

Тиснение

text-shadow: 0px 2px 3px #555;
background-color:#333;

Радуга

text-shadow: 0 0 2px 3px yellow,
             0 0 2px 6px orange,
             0 0 2px 9px red,
             0 0 2px 12px lime,
             0 0 2px 15px blue,
             0 0 2px 18px violet;

3D

text-shadow: 0 0 1px #999,
             1px 1px 1px #888,
             2px 2px 1px #777,
             3px 3px 1px #666,
             4px 4px 1px #555,
             5px 5px 1px #444;
background-color:#333;
color:white;

Винтаж

text-shadow: 2px 2px #fff,
             3px 3px #666;

Буквица

.text {
    text-shadow:0 0 5px;
}

.text::first-letter {
    color:azure;
    text-shadow:0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan, 0 -4px 9px 9px lightblue ;
}

Пламя

text-shadow: 0 0 2px #eee, 
             0 0 4px 2px #fff, 
             0 -2px 4px 2px #ff3, 
             2px -4px 6px 4px #fd3, 
             -2px -6px 11px 6px #f80, 
             2px -8px 18px 8px #f20;
background-color:#222;
color:white;