Свойство box-shadow §

Тени создаются с помощью CSS-свойства box-shadow. Это достаточно сложное свойство, которое состоит из 6 компонентов. С помощью этого свойства можно создавать множественные тени.

Смещение тени по горизонтали §

Cинтаксиc свойства. Вот он:

box-shadow:
[inset] — внутренняя
5px     <— смещение по x
10px    — смещение по y
[2px]   — размытие
[3px]   — растяжение
[red];  — цвет

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

Смещение по горизонтали может быть положительным и отрицательным.

Смещение тени по вертикали §

Еще раз синтаксис:

box-shadow:
[inset] — внутренняя
5px     — смещение по x
10px    <— смещение по y
[2px]   — размытие
[3px]   — растяжение
[red];  — цвет

Второе цифровое значение задаёт смещение по вертикали. Оно работает аналогично предыдущему значению, смещая тень вверх или вниз.# Смещение тени по вертикали

Размытие тени §

Третье цифровое значение задаёт радиус размытия тени.

box-shadow:
[inset] — внутренняя
5px     — смещение по x
10px    — смещение по y
[2px]   <— размытие
[3px]   — растяжение
[red];  — цвет

Чем меньше значение, тем четче тень. Максимальная четкость достигается при нулевом значении. Размытие не может быть отрицательным. Если размытие не указано, то оно равно нулю.

Растяжение тени §

Четвёртое цифровое значение задаёт растяжение тени.

box-shadow:
[inset] — внутренняя
5px     — смещение по x
10px    — смещение по y
[2px]   — размытие
[3px]   <— растяжение
[red];  — цвет

По умолчанию размер и форма тени такие же, как и у элемента, которому она принадлежит. Но размер тени можно изменить с помощью растяжения.

При нулевом (или не указанном) растяжении размер тени такой же, как у элемента. При положительном растяжении размер тени становится больше размера элемента, а при отрицательном — меньше.

Размытие + растяжение §

Размытие и растяжение иногда используют друг с другом, это позволяет управлять насыщенностью тени. Внешний вид тени будет зависеть от соотношения величин размытия и растяжения:

1. размытие есть, растяжение отрицательное — тень очень светлая;
2. размытие есть, растяжения нет — тень обычная;
3. размытие больше растяжения — тень темнее обычного;
4. размытие меньше растяжения — тень очень темная.

Цвет тени §

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

box-shadow:
[inset] — внутренняя
5px     — смещение по x
10px    — смещение по y
[2px]   — размытие
[3px]   — растяжение
[red];    <— цвет

Цвет тени — мощный инструмент в руках умелого дизайнера, который позволяет создавать выразительные эффекты.

Внутренняя тень §

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

box-shadow:
[inset] <— внутренняя
5px     — смещение по x
10px    — смещение по y
[2px]   — размытие
[3px]   — растяжение
[red];  — цвет

inset лучше размещать либо в самом начале свойства, либо в самом конце.

Полупрозрачная тень §

Если у тени ненулевой радиус размытия, то она автоматически становится полупрозрачной. Но иногда нужно сделать полупрозрачной тень без радиуса размытия (например, как у кнопок в мини-браузере).

Для этого можно использовать новый формат записи цветов в CSS — rgba. Пример:

color: red;
color: #ff0000;
color: rgba(255, 0, 0, 0.5);

Все записи цвета в примере задают красный цвет, но в последней записи задан красный с 50% прозрачностью.

В rgba первые три значения задают цвет и могут быть целым числом от 0 до 255. Последнее значение задаёт уровень прозрачности и может быть дробным числом от 0 (полная прозрачность) до 1.

Задавать полупрозрачный цвет с помощью rgba можно не только теням, но и остальным свойствам с цветом: рамкам, фону и так далее.

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

Теперь рассмотрим несколько интересных приёмов работы с тенями.

Первый приём позволяет сделать так, чтобы тень была видна только с одной стороны элемента.

Для этого нужно задать тени отрицательное растяжение и положительное размытие, а затем сместить тень в нужном направлении. Отрицательное растяжение сделает размытую тень меньше элемента, а смещение покажет край тени только с одной стороны.

Подобный приём позволяет имитировать градиенты с помощью внутренних теней.

Множественные тени §

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

box-shadow:
  0 0 5px 0 red,
  0 0 10px 0 white;

Тени, которые расположены в списке выше, будут перекрывать тени, которые расположены ниже.

Несколько рамок у одного элемента §

С помощью множественных теней можно создавать различные интересные эффекты.

Например, можно имитировать множественные рамки у элемента. Для этого нужно добавить элементу несколько теней с положительным растяжением и с нулевыми смещениями и размытием.

Но тут есть одна тонкость. Настоящие рамки увеличивают размер элемента, а рамки-тени — нет. Поэтому надо следить, чтобы вокруг элемента было достаточно свободного пространства, иначе он может перекрыть соседние элементы.