Наше путешествие в мир теней продолжается. Если вы пропустили статью , мы изучили основы использования свойства box-shadow . Сегодня мы собираемся сосредоточиться на тексте-тени .
Напомню, что оба свойства определены в разных модулях и работают одинаково. Так что, если вы уже знакомы с box-shadow, вы легко поймете основы искусства text-shadows. Прежде чем мы перейдем к практике, давайте немного углубимся в теорию, чтобы выяснить, в чем разница между ними.
Поддержка браузера
Правило text-shadow поддерживается многими современными браузерами, включая IE10 . Вы также можете использовать его в своих приложениях в стиле metro для Windows 8 .
тень текста против коробки тени
Первое, что вам нужно знать, это то, что обе спецификации (CSS3 Backgrounds and Borders и CSS3 Text) на данный момент находятся в состоянии Working Draft и, следовательно, они все еще могут измениться. Я также буду обсуждать это, говоря о расстоянии распространения.
Если вы помните синтаксис box-shadow, он выглядит так:
box-shadow: none |
<shadow> [ , <shadow> ]*;
<shadow>
= inset? && [ <length>{2,4} && <color>? ]
Второе правило в полном режиме можно расширить как:
shadow = inset? h-offset v-offset blur-radius spread-distance color;
Спецификация для CSS3 Text описывает свойство text-shadow аналогичным образом:
text-shadow: none | [
<length>{2,3} && <color>? ]#
Куда:
Значения интерпретируются как «box-shadow».
Таким образом, вы можете думать о полном синтаксисе для одного эффекта тени текста как:
shadow = h-offset v-offset blur-radius color;
Здесь есть два отличия: во-первых, вы не можете создать внутреннюю тень для текста, и во-вторых, в CSS3 Text нет расстояния для текста-тени. По аналогии с box-shadow вы можете создавать несколько теней, отображаемых друг над другом. Теперь давайте немного потренируемся.
текст-тень
Смещения и цвет
Мы начнем с самых первых шагов — чтобы определить некоторые горизонтальные и вертикальные смещения, все, что вам нужно, это записать два значения длины (1.1–1.4):
Положительные смещения перемещают тень вправо и вниз (1.1):
text-shadow:10px 10px; width:300px;
Отрицательные значения определяют смещение, сдвинутое влево и вверх (1.2):
text-shadow:-5px -5px; width:300px; color:blue;
Далее идет цвет. Давайте сначала обсудим, что происходит, когда цвет опущен.
Согласно текущей версии спецификации:
«Если цвет отсутствует, используемый цвет берется из свойства« color ».»
Если вы посмотрите на разные браузеры, вы можете заметить, что их поведение отличается. Браузеры на основе Webkit в этом случае используют прозрачный цвет — и не потому, что они плохие или делают что-то не так. Дело в том, что предыдущая версия css3-Background гласила:
пропущенные цвета — это выбранный UA цвет.
Я верю, что это будет исправлено в будущих версиях Chrome, Safari и других webkit-браузеров.
Пропуск цвета тени текста и, следовательно, применение к нему того же цвета, что и текст, может быть полезным, если вы хотите создать эффект размытого текста (см. Примеры 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 */
Обратите внимание, что при работе с тенями вы можете использовать любой цветовой формат, определенный в модуле Color CSS3, включая функции rgba () и hsla () с альфа-каналом.
нечеткость
Третий параметр длины предназначен для радиуса размытия (2.1–2.4):
В соответствии с определением радиуса размытия для свойства box-shadow следует использовать неотрицательное значение (0 — для размытия не требуется). Точный алгоритм размытия может отличаться в разных браузерах, но в математическом смысле все они должны быть достаточно близки к алгоритму размытия по Гауссу.
В первых двух примерах (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) я изменяю только цвет текста и фона, и оба эффекта тени применяются с использованием одного и того же CSS-класса blurred-shadow :
.blurred-shadow
{
text-shadow:0px 0px 4px ; /* the color
is absent*/
}
color:red; /* 2.3 */
color:lightgray; background:#333; /* 2.4 */
Расширение и сокращение
Теперь пришло время поговорить еще немного о веб-стандартах. Я считаю, что вы должны это знать, прежде чем пытаться использовать значение распространения в текстовой тени в любом из ваших проектов. Во время работы над модулем CSS3 Text CSSWG решила внести изменения в предыдущую версию этой спецификации, чтобы ускорить продвижение к статусу рекомендации. В этом предыдущем выпуске свойство text-shadow включало еще один (четвертый) параметр длины — расстояние разбрасывания.
Аналогично box-shadow, распространение-расстояние для текста-тени позволяет расширить или сжать тень.
На данный момент это определение текста-тени было перенесено на L4 — и сегодня вы можете найти его в ED для css4-текста . Теперь я собираюсь обсудить, как использовать распространение, вы можете попробовать его в последних версиях IE10 (как я знаю в настоящий момент, IE — единственный браузер, поддерживающий распространение для текстовых теней). Spread — действительно мощный инструмент, позволяющий создавать удивительные образцы! Но это также может измениться в будущем. Так что будьте осторожны!
Чтобы увеличить тень, установите положительное значение разбрасывания (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;
И еще одно важное замечание! На самом деле сегодня четвертая длина в правиле тени текста трактуется не как поддержка браузеров как неправильное определение тени текста, и такие правила просто игнорируются. Поэтому, если вы хотите обеспечить какой-то уровень совместимости для них, вам нужно будет удвоить свои правила для текстовых теней:
text-shadow: 0px 0px 10px lightgreen; /* 3.4 */ text-shadow: 0px 0px 10px 10px lightgreen; /* 3.5 */
Иногда расширение тени можно эмулировать, используя несколько теней со смещением в различных направлениях (см. Примеры 4.6 и 4.7 в следующей главе).
Множественная тень
Наконец, и абсолютно аналогично box-shadow, вы можете применить несколько теней к тексту (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;
Традиционный эффект «письма-печати» (5.4):
text-shadow: 0px 2px 3px #555;
Также традиционный 3d-текст (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)
Collapse | Copy Code
text-shadow: 0 0 2px -3px rgba(196,255,0,0.3),
0 0 6px -5px #9c6;
color:transparent;
Использование тени текста на псевдоклассе css :: 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 в сентябре прошлого года: « Практическое занятие: text-shadow ».
Запись
Свойства CSS, обсуждаемые в этой статье, определяются в текстовом модуле CSS3, который в данный момент находится в состоянии «Рабочий чертёж». Между тем, он кажется достаточно стабильным, но все еще может измениться в деталях.