Свойство 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
Минус способа состоит в том, что тени можно наложить только поверх однородного фона, но при разумном использовании они выглядят очень эффектно.
