Site icon Vavik96

Свойство Box-shadow

Свойство box-shadow позволяет добавить элементам одну или несколько теней.

Возможные значения: none | <установки тени>

Значение по умолчанию: none

Применяется: all elements

Наследуется: нет

Проценты: не используются

Спецификация.

Синтаксис совсем простой:

 

box-shadow: 15px 15px 5px -5px rgba(0,0,0,.2);

 

Этот код даст вот такую тень:

 

 

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

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

Последнее значение — цвет. Очень удобно задавать его в hsla или в rgba, чтобы тень была прозрачной и затемняла нижележащий фон независимо от его цвета.

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

Есть ещё один параметр — inset. Если он задан, тень отбрасывается внутрь элемента.

При использовании нескольких теней они задаются одна за другой через запятую.

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

 

 

При этом если теней несколько, изменение порядка заданных теней при анимации дает интересный эффект:

 

 

С тенями можно сделать много интересного, от, собственно, теней, до разнообразных декоративных элементов.

Каждый из примеров ниже сделан с помощью теней на основе одного дива, в некоторых используются псевдоэлементы:

 

 

Ещё можно сделать радугу:

 

 

Или вот, например, пуговицы:

 

 

Или пузырь с текстом:

 

 

Просто удивительное количество возможностей предоставляет такое простое свойство.

Также в последнее время становятся популярными длинные тени (в данном случае это box-shadow + text-shadow):

 

 

Суть способа состоит в использовании множества теней, при этом ближайшие к фигуре имеют цвет, собственно, тени, а дальние от неё плавно переходят к цвету фона. Использовать rgba с прозрачностью здесь не получится, потому что тогда тени будут просвечивать друг под другом.

Руками такие штуки писать неудобно, поэтому проще будет воспользоваться генераторами:

sandbox.juan-i.com/longshadows/
longshadowgenerator.com/
codepen.io/awesomephant/pen/mAxHz

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

Источник

Exit mobile version