skip to main content

box-shadow

css

Кратко 🔗

Свойство, бросающее тень на ваши блоки 👤

Создано, чтобы имитировать объекты реального мира и создавать иллюзию объёма для плоских элементов интерфейса.

Пример 🔗

Частая ситуация — выделить кнопку, задав ей тень, что визуально сделает её объёмной.

<button class="but-btn btn">Купить немедленно!</button>

Помимо основных оформительских стилей задаём нашей кнопке тень:

.btn {
box-shadow: -15px 15px 0px 0px #ED6742;
}

Получаем псевдообъёмную кнопку, которая парит над страницей:

Как пишется 🔗

Каждая тень состоит из следующих значений:

  1. Два, три или четыре значения размера с единицами измерения:
  • Если задано два значения, то они расшифровываются как смещение по оси Х и по оси Y.
  • Если задано третье значение, то оно интерпретируется как радиус размытия.
  • Если задано четвёртое значение, то оно отвечает за радиус распространения.
  1. Дополнительно (не обязательно) можно указать ключевое слово insert, которое превратит тень из внешней во внутреннюю.
  2. Чаще всего, но не обязательно, нужно указывать цвет тени в любом доступном формате цвета.

Разберёмся со всем этим чуть подробнее:

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

Смещения по осям Х и Y — обязательные значения для тени. Могут принимать любые числовые значения, в том числе отрицательные. Значение по умолчанию равно 0 для обеих осей. Если первое значение положительное, то тень будет справа от элемента, если отрицательное — слева. Если второе значение положительное, то тень будет снизу, если отрицательное — сверху.

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

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

Цвет — вроде бы опциональное, но на самом деле обязательное значение цвета тени. Почему? Если не указывать цвет, то решение остаётся за браузером. Как правило, браузер возмёт значение свойства color того элемента, которому прописываете тень. Но Safari (sic!) отрисует прозрачную тень. Если вам действительно нужен цвет тени, совпадающий с цветом текста элемента, то это можно указать явно при помощи ключевого слова currentColor.

Можно задавать несколько теней для одного элемента, перечисляя их через запятую.

.btn {
box-shadow: 0 5px 10px gray, -5px -10px 20px pink;
}

Как это понять 🔗

Поскольку всё в вебе по умолчанию плоское, а также в вебе не бывает источников освещения, тени просто не возможны в компьютерном мире.

Чтобы сделать компьютеры менее враждебными и вызвать у пользователя знакомые эмоции при работе с интерфейсом, дизайнеры периодически смотрят в сторону скевоморфизма с максимально объёмными элементами и тенями.

Старый и новый дизайн иконок эппла

Слева старый дизайн иконок эппла в стиле скевоморфизм

Дизайн в стиле скевоморфизм

Новые, современные эксперименты с дизайном в стиле скевоморфизм. Обратите внимание на количество теней (внутренних и внешних) у каждого из элементов. Именно за счёт теней создаётся объём одноцветных элементов.

Подсказки 🔗

💡 Свойство задаёт тень именно для блока. Тень будет совпадать с формой блока. Если вы сделали круглый блок при помощи, например, border-box, то тень тоже будет круглой. Если не менять форму элемента, то тень будет прямоугольной.

💡 Если нужна тень для букв в тексте, то используйте свойство text-shadow.

В работе 🔗

🛠 С помощью тени можно создать блок с несколькими рамками!

<div class="box square"></div>
<div class="box circle"></div>
.box {
width: 150px;
height: 150px;
box-shadow:
inset 0 0 6px 0px #c000ff,
0 0 0 3px #c000ff,
0 0 6px 3px #c000ff,
0 0 0 7px #18191C,
0 0 0 10px #6e4aff,
0 0 6px 10px #6e4aff,
0 0 0 14px #18191C,
0 0 0 17px #c000ff,
0 0 6px 17px #c000ff;
}

🛠 Тени можно использовать для ховер-эффектов. При помощи теней кнопка сделана выпуклой, а при нажатии она становится впуклой за счёт изменения положения теней.

<button class="btn">Зажми</button>
.btn {
box-shadow:
5px 5px 10px #c9c9c9,
inset -5px -5px 8px -4px #c9c9c9,
-5px -5px 10px #fdfdfd,
inset 5px 5px 8px -4px #fdfdfd;
}

.btn:active {
box-shadow:
5px 5px 10px #c9c9c9,
inset -5px -5px 8px -4px #c9c9c9,
inset -6px -6px 8px 0px #fdfdfd,
-5px -5px 10px #fdfdfd,
inset 5px 5px 8px -4px #fdfdfd,
inset 6px 6px 8px 0px #c9c9c9;
}

Автор: Алёна,