⑦ Тень текста: свойство text-shadow

Продолжим изучение темы CSS3 - оформление текста. Если пропустили прошлые статьи, то вот ссылки на них:

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

IE: 10
Edge: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 4

Свойство text-shadow используется для добавления тени к тексту. Тень текста — интересный инструмент, который позволяет создавать удивительные эффекты. Тени могут быть однослойными или многослойными, размытыми, цветными или полупрозрачными. Задавая тень для элемента, можно указывать только одно значение длины и цвет, таким образом создавая цветную копию отдельного символа или слова. Также, с помощью тени можно сделать текст более читаемым, если контраст между цветом текста и фоном невелик.

Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.

Каждая тень определяется двумя или тремя значениями длины и необязательным цветом. Допустимы длины, равные 0.

Свойство не наследуется.

📷 РИС. 3. СИНТАКСИС СВОЙСТВА TEXT-SHADOW

text-shadow

Значения:

x-offset - Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево.
y-offset - Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.
blur - Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени.
цвет - Задает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства color.
none - Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством.
initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

В отличие от box-shadow, текстовые тени не обрезаются и могут отображаться, если текст частично прозрачен. Как и box-shadow, текстовые тени не влияют на макет и не вызывают прокрутку или увеличение размера прокручиваемой области.

Синтаксис

CSS

text-shadow: 2px 2px 4px pink; 
text-shadow: #fc0 1px 0 10px; 
text-shadow: 5px 5px #4D4644;
text-shadow: blue 2px 5px;
text-shadow: 5px 10px;
text-shadow: inherit;
text-shadow: initial;

Продолжение в следующей статье!