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

Тени, направленные влево и вверх, можно получить, задав отрицательные значения, например:

.text {

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

}

Цветовое значение не обязательно определять в HEX-виде (то есть задавать в виде шестнадцатеричных чисел цветовых составляющих), с тем же успехом оно может быть определено в формате HSL(A) или RGB(A):

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 для создания тени внутри элемента.

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