2.18. CSS3-тень блока

css3_shadowsСвойство box-shadow добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.

Как сделать тень блока с помощью свойства box-shadow

Поддержка браузерами

IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-

1. Синтаксис свойства box-shadow

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

box-shadow
Рис. 1. Синтаксис свойства box-shadow
box-shadow
Значения:
x-offset Обязательное значение. Смещение тени по горизонтали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вправо от блока, отрицательное – влево.
y-offset Обязательное значение. Смещение тени по вертикали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вниз, отрицательное — вверх.
blur Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень. Можно использовать только положительные значения.
растяжение Необязательное значение, расширяет тень, утолщая ее сплошную часть между размытыми краями. Принимает как положительные, так и отрицательные значения, задаётся в единицах длины — px и т.д.
цвет Необязательное значение. По умолчанию тень черного цвета. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha). Для Safari цвет тени указывать обязательно.
inset Создаёт тень внутри блока.
none Значение по умолчанию, означает отсутствие тени.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

2. Примеры тени для блока

2.1. Внутренняя тень

<p class="example-shadow-1"><span></span></p>
.example-shadow-1 {
  background: #e6e3df;
  text-align: center;
}
.example-shadow-1 span {
  margin: 50px;
  height: 100px;
  width: 200px;
  display: inline-block;
  box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}

2.2. Плоская тень с одной стороны

flat

<p class="example-shadow-2"><a href="#btn">flat</a></p>
.example-shadow-2 {
  background: beige;
  text-align: center;
}
.example-shadow-2 a  {
  display: inline-block;
  border-radius: 5px;
  padding: 15px 35px;
  font-size: 22px;
  margin: 20px;
  color: white;
  background: #55acee;
  box-shadow: 0 5px 0 #3C93D5;
}
.example-shadow-2 a:hover {
  background: #6FC6FF;
}

2.3. Тень в стиле «материальный дизайн»

<p class="example-shadow-3"><span></span></p>
.example-shadow-3 {
  background: #e8e8e8;
  text-align: center;
}
.example-shadow-3 span {
  background: white;
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 50px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

3. Эффекты для тени при наведении

See the Pen xRwqWo by Elena (@html5book) on CodePen.

4. Анимация тени

See the Pen YpypeE by Elena (@html5book) on CodePen.

  • Создание Сайтов

    Вот в начале указано что в осле box-shadow не работает. Краем уха слышал, что box-shadow можно для ие заменять каким-то способом но не картинками. Что это за способ? или это очередные форумкские байки?

    • Есть CSS3 PIE (http://css3pie.com) — дополнительный модуль для IE 6-9, который добавляет поддержку закруглённых углов, теней, градиента и т.д. Модуль выполнен в виде файла с расширением .htc, который подключается в CSS-объявлении через свойство behavior.

      • Создание Сайтов

        Вот, вроде бы про эти костыли box-shadow для Ие я и слышал. Благодарю Елена!