Вторник, 27 Ноябрь 2018 16:16

Делаем тени в CSS

Одно из самых востребованных свойств в CSS в последнее время, является – добавление теней, причём, как к тексту, так и к изображению. В случае с текстом, тень придаёт ему «объёмности», в случае с изображением, особенно выделяет на общем фоне.

сделать тени в CSS

Рассмотрим два основных способа реализации теней в CSS:

box-shadow

Конструкция box-shadow содержит несколько различных значений:

сделать тени в CSS

Horizontal offset и vertical offset — горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:

сделать тени в CSS

Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:

сделать тени в CSS

Край тени просто размывается. При различном значении spread radius видим следующее:

сделать тени в CSS

В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius, то они будут равны 0.

text-shadow

Синтаксис очень похож на box-shadow:

сделать тени в CSS

Значения аналогичные, только нет spread-shadow. Пример использования:

сделать тени в CSS

Inset в box-shadow

Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:

сделать тени в CSS

Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):

сделать тени в CSS

Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:

сделать тени в CSS

Изображения с тенями

Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div. Для начала вот обычный код картинки:

<img src="/airplane.jpg" alt="airplane" />

Логично предположить, что добавить тень можно так:

img
  {
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
  }

Но тень не видно:

сделать тени в CSS

Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый — это обернуть картинку в обычный div:

<div>
  <img src="/airplane.jpg" alt="airplane" />
</div>

div
  {
    height: 200px;
    width: 400px;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
  }
  img
  {
    height: 200px;
    width: 400px;
    position: relative;
    z-index: -2;
  }

сделать тени в CSS

Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ — это установить изображение фоном нужного блока:

<div>
<!-- пустой div -->
</div>

div
  {
    height: 200px;
    width: 400px;
    background: url(airplane.jpg);
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
  }

сделать тени в CSS

Вот, что может получится при использовании внутренних теней:

сделать тени в CSS

Inset в text-shadow

Для реализации внутренней тени текста простое добавление в код inset не работает:

сделать тени в CSS

Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:

h1
  {
    background-color: #565656;
    color: transparent;
    text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
  }

Вот, что получается:

сделать тени в CSS

Добавляем секретный ингредиент background-clip, который обрезает все, что выходит за пределы текста (на темный фон):

h1
  {
    background-color: #565656;
    color: transparent;
    text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
  }

сделать тени в CSS

Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:

сделать тени в CSS

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

Проверить поддержку background-clip браузерами можно на caniuse.

сделать тени в CSS

Спонсоры: