CSS-свойство text-shadow
Свойство CSS text shadow используется для добавления тексту тени. Допускается указывать несколько параметров свойства, разделяя их запятой.
Каждая тень применяется к тексту элемента, а также ко всем стилям (например, подчеркивание) текста.
Тени применяются в следующем порядке: первая тень находится на самом верху. Следовательно, тени могут накладываться друг на друга, но никогда не располагаются поверх текста.
Каждой тени обычно задается два значения длины (реже три и более), а также опционально цвет. Если не указывать цвет, то тень автоматически наследует цвет текста. Цвет можно задать при помощи различных форматов (включая RGB и HSL). Рекомендуется указывать цвет в формате rgba, так как он имеет некоторые преимущества перед десятичной системой. Например, этот формат позволяет использовать еще одно значение. Таким образом, можно регулировать не только расположение, размытие и цвет тени, но и уровень непрозрачности (то же касается и формата hsla).
При создании тени можно использовать три значения длины: x-offset (сдвиг по оси x), y-offset (сдвиг по оси y), а также радиус размытия тени.
Радиус размытия в CSS shadow является необязательным параметром, и если вы не хотите его использовать, то браузер будет учитывать значение по умолчанию – 0. Если значение радиуса равняется 0, то границы тени будут острыми. Чем выше значение, тем более размытыми будут края тени. Свойство радиуса не принимает отрицательные значения.
В то же время, сдвиги по осям нужно указывать обязательно. Параметр x-offset отвечает за горизонтальное смещение тени. Положительное значение сдвигает тень вправо относительно текста, а отрицательное значение сдвигает ее влево.
Параметр y-offset сдвигает тень вниз (положительное значение) и вверх (отрицательное значение) относительно текста.
Дополнительная стилизация
Свойство text-shadow также можно использовать для создания визуальных эффектов, некоторые из которых способны улучшить читабельность текста, сделать его более реалистичным. На изображении ниже показано четыре доступных стиля, которые можно создать с помощью свойства CSS text-shadow:
Тени способны сделать текст более читабельным за счет понижения контраста между фоном и текстом. Свойство 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);
}Поддержка браузерами:
