Внутренние тени в CSS

в 12:41, , рубрики: css, веб-дизайн, Веб-разработка, внутренние тени

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

Внутренние тени в 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="http://lorempixum.com/800/400/transport/2" alt="airplane">

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

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

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

Внутренние тени в CSS

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

<div>
  <img src="http://lorempixum.com/800/400/transport/2" 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(https://lorempixum.com/400/200/transport/2);
  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

Автор: grokru

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js