Продолжаем погружаться в искусство владения тенями в новых модулях CSS3. Прошлый раз мы рассматривали работу с box-shadow, сегодня мы перейдем к text-shadow.
Напомню, что оба правила, хотя и описаны в разных модулях, работают практически идентичным образом, поэтому, если вы уже знакомы с box-shadow по первой части, в этой, второй, части вы увидите много знакомого. И, прежде, чем переходить непосредственно к примерам, давайте сразу разберемся, какие есть различия, чтобы не останавливаться на них далее.
text-shadow vs box-shadow
Если вы вернетесь к разделу про синтаксис box-shadow в первой части, вы найдете такое описание:
box-shadow: <shadow> [ , <shadow> ]*;
<shadow> = inset? && [ <length>{2,4} && <color>? ]
Где последнее разворачивается в полном виде в такую конструкцию:
box-shadow: inset? h-offset v-offset blur-radius spread-distance color;
Спецификация CSS3 Text, описывая text-shadow, говорит буквально следующее:
<shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed
В переводе на русский это означает, что для текста невозможны внутренние тени (inset) и синтаксис для text-shadow выглядит следующим образом:
text-shadow: <shadow> [ , <shadow> ]*;
<shadow> = [ <length>{2,4} && <color>? ]
Аналогично box-shadow возможны множественные тени накладываемые поверх друг друга так, что первая тень оказывается наверху. Теперь давайте смотреть, как это все работает.
text-shadow
Сдвиги и цвет
Начнем со сдвигов и работы с цветом. За сдвиги тени отвечают первые два линейных параметра, указывающих длинну (1.1–1.4):
Если вы указываете положительные значения, тень сдвигается влево и вниз (1.1):
text-shadow:10px 10px; width:300px;
Отрицательные значения сдвигают вправо и вверх (1.2):
text-shadow:-5px -5px; width:300px; color:blue;
Аналогично box-shadow, все браузеры, кроме основанных на webkit, если цвет тени явно не задан, берут его из цвета текста (1.1–1.2). Это может быть полезным, например, если вы хотите автоматически делать тень цвета текста, но, например, размытой (см. примеры 2.3 и 2.4). Для явного задания цвета тени достаточно прописать нужное значение в правиле:
text-shadow:-1px -1px white; color:blue; background:#333; /* 1.3 */
text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee; /* 1.4 */
Обратите внимание, что при указании цвета полностью применимы возможности CSS3 Color, включая указание уровня прозрачности цвета (alpha) через rgba или hsla.
Размытие
Третий линейный параметр описывает радиус размытия тени (2.1–2.4):
В полном согласии с определением box-shadow, размытие задается некоторым положительным числом — радиусом размытия. Само размытие может осуществляться UA по любому алгоритму с большой точностью аналогичному размытию по Гауссу с половинным радиусом относительно границы тени.
В первых двух примерах (2.1 и 2.2) задан разный радиус размытия:
text-shadow:5px 5px 3px darkred; color:red; /* 2.1 */
text-shadow:4px -4px 10px red; color:azure; background:#333; /* 2.2 */
Во второй паре примеров (2.3 и 2.4) различается только цвет текста и фона, а сами правила задания тени описаны через применяемый к блокам класс blured-shadow:
.blured-shadow {
text-shadow:0px 0px 4px ; /* не зависит от цвета текста */
}
color:red; /* 2.3 */
color:lightgray; background:#333; /* 2.4 */
(Этот пример некорректно работает в Chrome из-за описанных выше нюансов, впрочем спецификация говорит, что пропущенный цвет остается на усмотрение UA.)
Растяжение и сжатие
Четвертый линейный параметр, если он присутствует, отвечает за растяжение или сжатие тени.
Для увеличения тени spread-distance должен быть положительным (3.1):
text-shadow:5px 5px 0px 3px lightgreen; color:green;
Для уменьшения — отрицательным (3.2):
text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;
Если отступ тени нулевой, ее можно использовать для обводки текста (3.3):
text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green; background:#333;
Важная деталь. Насколько мне известно, в настоящий момент (сюрприз!) параметр spread-distance для text-shadow поддерживается только в Internet Explorer 10, а остальные браузеры его не поддерживают (см. например, bug 655590 “[css3-text] Support the spread radius in text-shadow” в Mozilla Bug tracker). Это же верно и в отношении большинства учебников и статей в интернете, которые своевременно не были обновлены вслед за изменениями в спецификации. Поэтому в большинстве примеров, которые вы найдете в сети, вы даже не увидите упоминания возможности растяжения или сжатия тени текста ;)
И еще одна важная деталь. Наличие четвертого параметра сегодня трактуется неподдерживающими его браузерами как неправильное задание тени — в результате эти правила просто игнорируются. Поэтому для обеспечения хоть какого-то уровня совместимости, если вы используете spread-distance, необходимо дублировать правила, например, так:
text-shadow: 0px 0px 10px lightgreen; /* 3.4 */ text-shadow: 0px 0px 10px 10px lightgreen; /* 3.5 */
Если вы все же хотите смоделировать увеличение тени, в определенных пределах это можно сделать через множественные тени, рассматриваемые в следующем разделе (см. примеры 4.6 и 4.7).
Множественные тени
Наконец, аналогично теням для блоков, к тексту также можно применять несколько теней одновременно, добиваясь при этом различных эффектов (4.1–4.5):
Начиная с простейшей дублированной обводки (4.1):
text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta;
И возможности смещения теней в разные стороны (4.2):
text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35),
6px -6px 4px 2px rgba(255,255,255,0.25),
-3px -3px 4px 6px rgba(255,0,255,0.15);
Продолжая эффектами типа неона (4.3):
text-shadow: 0 0 0 3px white,
0 0 2px 6px magenta,
0 0 1px 9px white,
0 0 6px 12px magenta;
И немного более изощренным вариантом (4.4)
text-shadow: 0 0 2px #fff,
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;
Или же с ограниченным использованием предыдущего приема перекрытия смещенных теней — небольшое подчеркивание (4.5):
text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; color:magenta;
Эмуляция растяжения
Как было сказано в предыдущем разделе, технически множественные тени можно применять для эмулирования увеличения тени. Например, чтобы сделать что-то похожее на (4.6):
text-shadow: 0px 0px 0px 4px magenta;
Можно было бы применить одновременно несколько теней, сдвинутых в разных направлениях (4.7):
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;
Однако, если приглядеться, между ними заметна разница. Также важно понимать, что такой прием ограничен в применимости: он не только менее точен, но и отрицательно сказывается на производительности отрисовки страницы.
Интересные примеры
Теперь давайте рассмотрим еще несколько примеров использования теней для реализации различных интересных эффектов.
Начнем с классической радуги (5.1):
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;
Двойная тень для стрелки (5.2):
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;
Традиционная огненная тень (5.3):
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;
Традиционный “letter-press”, — здесь также важен контраст с фоном (5.4):
text-shadow: 0px 2px 3px #555;
Не менее традиционный 3d-text (5.5):
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;
Двойная тень для винтажного эффекта (5.6)
text-shadow: 2px 2px #fff,
3px 3px #666;
Проступающая надпись с прозрачным текстом и сжатой тенью, — также зависит от размера и гарнитуры шрифта (5.7)
text-shadow: 0 0 2px -3px rgba(196,255,0,0.3),
0 0 6px -5px #9c6;
color:transparent;
Применение отдельной буквы для псевдо-класса ::first-letter (5.8)
.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 ;
}
Интерактив
Если вы хотите просто поиграться с тенями в интерактивном режиме, наши коллеги к прошедшей в сентябре конференции Build подготовили демонстрационную страницу: “Hands-on: text-shadow”.
Internet Explorer
text-shadow поддерживается в IE10+.
И повторю свой совет относительно использования фильтров: не используйте фильтры вообще, либо продумывайте верстку и стили так, чтобы для IE9+ они не применялись. Стандартные css-эффекты в IE в отличие от нестандартных старых фильтров, начиная с 9й версии, работают с использованием аппаратного ускорения, к тому же фильтры часто оказываются несочетаемыми с новыми стандартными свойствами CSS.