Создание сайтов с нуля - урок 35 - Тени в CSS

Тени в 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);

Тень только с одной стороны

Чтобы сделать тень только с одной стороны элемента, необходимо задать:

• отрицательное растяжение (сделает тень меньше элемента);
• положительное размытие;
• смещение в нужном направлении (покажет край тени только с одной стороны).