CSS-свойство text-shadow

Свойство CSS text shadow используется для добавления тексту тени. Допускается указывать несколько параметров свойства, разделяя их запятой.

Каждая тень применяется к тексту элемента, а также ко всем стилям (например, подчеркивание) текста.

Тени применяются в следующем порядке: первая тень находится на самом верху. Следовательно, тени могут накладываться друг на друга, но никогда не располагаются поверх текста.

Каждой тени обычно задается два значения длины (реже три и более), а также опционально цвет. Если не указывать цвет, то тень автоматически наследует цвет текста. Цвет можно задать при помощи различных форматов (включая RGB и HSL). Рекомендуется указывать цвет в формате rgba, так как он имеет некоторые преимущества перед десятичной системой. Например, этот формат позволяет использовать еще одно значение. Таким образом, можно регулировать не только расположение, размытие и цвет тени, но и уровень непрозрачности (то же касается и формата hsla).

text-shadow-syntax-img1

Синтаксис свойства text-shadow

При создании тени можно использовать три значения длины: x-offset (сдвиг по оси x), y-offset (сдвиг по оси y), а также радиус размытия тени.

Радиус размытия в CSS shadow является необязательным параметром, и если вы не хотите его использовать, то браузер будет учитывать значение по умолчанию – 0. Если значение радиуса равняется 0, то границы тени будут острыми. Чем выше значение, тем более размытыми будут края тени. Свойство радиуса не принимает отрицательные значения.

В то же время, сдвиги по осям нужно указывать обязательно. Параметр x-offset отвечает за горизонтальное смещение тени. Положительное значение сдвигает тень вправо относительно текста, а отрицательное значение сдвигает ее влево.
Параметр y-offset сдвигает тень вниз (положительное значение) и вверх (отрицательное значение) относительно текста.

Дополнительная стилизация

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

text-shadow-examples

Тени способны сделать текст более читабельным за счет понижения контраста между фоном и текстом. Свойство text-shadow также можно применять в комбинации с псевдоэлементами :first-line и :first-letter.

Синтаксис:

text-shadow: none | [ <length>{2,3} && <color>? ]#

Спецификация значений

  • <color>: в CSS shadow используется опционально. Его можно указывать как до, так и после значений сдвигов. Если цвет не указан, то по умолчанию используется цвет текста;
    Примечание: с точки зрения кроссбраузерности рекомендуется указывать цвет тени;
  • <offset-x>, : обязательные параметры. Эти значения <length> отвечают за сдвиг тени относительно текста. <offset-x> - за смещение по горизонтали, а <offset-y> - за смещение по вертикали. Отрицательные значения приведут к размещению тени поверх текста. Если оба значения выставлены по нулям, то тень будет располагаться за текстом;
  • <blur-radius>: опционально. Также является значением <length>. Без принудительного указания по умолчанию используется значение 0. Чем выше значение, тем более размытой будет тень.

Существует эффективный инструмент - CSS3 Text Shadow Generator.

Примеры

.shadowed {
    text-shadow: 5px 5px 3px #333;
}

.light-shadow {
    text-shadow: 0.2em 0.2em 0.2em rgba(0,0,0,0.2);
}

.multiple-shadows {
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1), 10px 10px 10px rgba(0, 0, 0, 0.2);
}

Посмотреть демо

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

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

Перевод статьи “CSS text-shadow” был подготовлен дружной командой проекта Сайтостроение от А до Я.

13 января 2017 в 10:01
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок