Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);

И тем не менее следует иметь в виду, что тогда для вывода эффекта на экран браузер также должен поддерживать не только тени для текста, но и режимы задания цвета HSL/RGB.

Значения, задающие тень, можно указывать и в любых других приемлемых для CSS единицах длины, таких как em, rem, ch и т. д. Лично я при задании значений для свойства text-shadow редко пользуюсь единицами длины em или rem. Поскольку значения всегда небольшие, то при всех величинах окон просмотра обычно неплохо выглядят тени, для задания которых используется значение 1px или 2px.

Благодаря использованию медиазапросов мы можем также без особого труда удалять текстовые тени при различных окнах просмотра. Ключевым в данном случае выступает значение none:

.text {

text-shadow: .0625rem .0625rem 0 #bfbfbf;

}

@media (min-width: 30rem) {

.text {

text-shadow: none;

}

}

совет

Кстати, вам стоит знать, что в CSS там, где значение начинается с нуля, например 0.14s, лидирующий нуль можно не ставить: .14s будет работать точно так же, как и предыдущее указание значения.

Если размытие не нужно, его значение можно опустить

Если добавлять размытие к значениям свойства text-shadow не нужно, то его можно опустить, например:

.text {

text-shadow: -4px -4px #dad7d7;

}

Это значение будет вполне допустимым. Браузер поймет, что если не задано третье значение, то первые два значения будут относиться к смещению тени.

Получение нескольких теней для текста

Если разделить задания теней запятыми, то к тексту можно добавить сразу несколько теней, например:

.multiple {

text-shadow: 0px 1px #fff,4px 4px 0px #dad7d7;

}

Кроме того, поскольку в CSS на пробельные символы не обращается никакого внимания, подобные значения можно разметить следующим образом, если, конечно, так их будет легче прочитать:

.text {

font-size: calc(100vmax / 40);

text-shadow:

3px 3px #bbb, /* справа и внизу */

-3px -3px #999; /* слева вверху */

}

совет

W3C-спецификацию, касающуюся свойства text-shadow, можно найти по адресу http://www.w3.org/TR/css3-text/.

Создание теней для блоков

Свойство box-shadow позволяет создавать прямоугольные тени как снаружи, так и внутри того элемента, к которому они применяются. После того как вы разобрались с тенями для текста, понять суть теней для блоков будет намного легче. В принципе, и те и другие следуют одному и тому же синтаксису: смещение по горизонтали, смещение по вертикали, размытие, протяженность (о которой мы вскоре узнаем) и цвет.

Из четырех возможных значений длины обязательными являются только два (в отсутствие последних двух цветовым значением определяется цвет тени, а для радиуса размытия используется нулевое значение). Рассмотрим простой пример:

.shadow {

box-shadow: 0px 3px 5px #444;

}

Изначально свойство box-shadow настроено на создание тени снаружи элемента. Хотя дополнительное ключевое слово inset позволяет применить box-shadow для создания тени внутри элемента.

Тень внутри элемента

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

.inset {

box-shadow: inset 0 0 40px #000;

}

Все работает точно так же, как и раньше, но inset-составляющая объявления предписывает браузеру применить эффект к внутренней части элемента. Примеры обоих типов можно увидеть, запустив код из каталога example_06-01.

Создание нескольких теней

Как и text-shadow, свойство box-shadow позволяет применить сразу несколько теней. Разделите значения, задаваемые свойству box-shadow запятой, и они будут применены, начиная с нижнего набора значений и заканчивая верхним набором (от последнего к первому). Усвойте мнемоническое правило, согласно которому самое близкое к вершине правило (в коде) проявится как самое верхнее в порядке вывода браузером на экран. Как и с text-shadow, вы можете извлечь пользу от применения пробельных символов для выстраивания визуального столбца из различных наборов значений для свойства box-shadow:

box-shadow: inset 0 0 30px hsl(0, 0%, 0%),

inset 0 0 70px hsla(0, 97%, 53%, 1);

совет

Выстраивая в коде в столбец нескольких длинных значений по принципу одно под другим, вы получаете дополнительные преимущества при использовании систем управления версиями, поскольку упрощаете обнаружение различий, когда сравниваете две версии файла в режиме их поиска. Именно поэтому я также выстраиваю в столбцы один под другим и селекторы в группах селекторов.

Понятие протяженности

Буду честен: буквально несколько лет назад я никак не мог взять в толк, что на самом деле для свойства box-shadow означает параметр spread. Не думаю, что название spread («распространение») отражает его истинный смысл. Лучше думать о нем как о протяженности. Позвольте пояснить.

Посмотрите на блок, появляющийся слева на экране при запуске кода из каталога example_06-02. К нему применены стандартные значения свойства box-shadow. А к блоку справа применено отрицательное значение spread, заданное четвертым по счету. Вот как выглядит соответствующий код: