Тени в CSS создаются при помощи двух свойств: box-shadow и text-shadow.
Свойство box-shadow создает тени для блочных элементов, а свойство text-shadow – для текстов. Синтаксис обоих свойств очень похож, поэтому сначала я разберу свойство box-shadow, которое немного сложнее, а затем изучим text-shadow.
Свойство box-shadow
Полный синтаксис записи свойства box-shadow следующий:
box-shadow: inset 1px 2px 3px 4px black;
Т.е. в свойстве box-shadow всего 6 параметров, два из которых являются обязательными: это смещение тени по осям x и y.
box-shadow: 1px 2px;
Первое цифровое значение задает смещение тени по горизонтали, второе - по вертикали. Положительное значение для смещения по горизонтали смещает тень вправо, отрицательное – влево. Положительное значение для смещения по вертикали смещает тень вниз, отрицательное – вверх.
Цвет тени
Цвет тени – не обязательный параметр, если он задается, от всегда последним, шестым, параметром. Если цвет тени не задан, то он будет таким, как и цвет текста элемента.
Размытие тени
Третье цифровое значение задаёт радиус размытия тени, не обязательный параметр.
box-shadow: 1px 2px 3px;
Если размытие тени не указано, то оно равно нулю. Размытие не может быть отрицательным. Чем меньше значение размытия, тем четче тень. Чем больше значение параметра, тем сильнее тень размывается и становится светлее.
Растяжение тени
Четвёртое цифровое значение задаёт растяжение тени, не обязательный параметр.
box-shadow: 1px 2px 3px 4px;
При нулевом (или не указанном) растяжении размер тени такой же, как у элемента. При положительном растяжении размер тени становится больше размера элемента, а при отрицательном - меньше.
Размытие и растяжение иногда используют друг с другом, это позволяет управлять насыщенностью тени. Внешний вид тени будет зависеть от соотношения величин размытия и растяжения:
- размытие есть, растяжение отрицательное — тень очень светлая;
- размытие есть, растяжения нет — тень обычная;
- размытие больше растяжения — тень темнее обычного;
- размытие меньше растяжения — тень очень темная.
Тени имеют тот же размер и форму, что и их родительский элемент.
Внутренняя тень
Последний параметр, который мы рассмотрим у свойства box-shadow, - это указатель на то, что тень должна быть не снаружи элемента, а внутри. Это ключевое слово inset. Лучше этот параметр всегда указывать первым.
box-shadow: inset 1px 2px 3px 4px;
Итого, полный набор параметров для свойства box-shadow следующий:
box-shadow: inset 1px 2px 3px 4px black;
Свойство text-shadow
Тени для текста создаются с помощью CSS-свойства text-shadow. Оно очень похоже на box-shadow, но есть некоторые отличия:
- форма тени повторяет форму текстовых символов;
- нет параметра растяжения тени;
- нет параметра внутренней тени.
В остальном все точно так же, как и для свойства box-shadow.
Полный набор параметров для свойства text-shadow следующий:
text-shadow: 1px 2px 3px black;
Множественные тени
И box-shadow и text-shadow позволяют задавать одному элементу сразу несколько теней. Для этого нужно перечислить значения теней через запятую:
box-shadow: 1px 2px 5px 2px blue, 2px 4px 10px 0 red;
text-shadow: 1px 1px 1px blue, 2px 2px 2px red;
Тени, которые расположены в списке выше, будут перекрывать тени, которые расположены ниже.
Полупрозрачная тень
Если у тени ненулевой радиус размытия, то она автоматически становится полупрозрачой. Также прозрачностью можно управлять при задании цвета в формате rgba:
box-shadow: 2px 5px 5px 5px rgba(0, 0, 0, 0.5);
Тень только с одной стороны
Чтобы сделать тень только с одной стороны элемента, необходимо задать:
- отрицательное растяжение (сделает тень меньше элемента);
- положительное размытие;
- смещение в нужном направлении (покажет край тени только с одной стороны).
