Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.
![](https://habrastorage.org/r/w1560/storage2/11d/628/168/11d628168cc4e6a87dcbb3c3d26e024e.png)
Прежде всего рассмотрим два основных способа реализации теней в CSS.
Конструкция box-shadow содержит несколько различных значений:
![](https://habrastorage.org/r/w780q1/storage2/dac/9ee/ecf/dac9eeecff5561b4e60ec9574491b50e.jpg)
Horizontal offset и vertical offset — горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:
![](https://habrastorage.org/r/w780q1/storage2/ffe/31b/d83/ffe31bd8396826bd4bf1437a65aedc83.jpg)
Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:
![](https://habrastorage.org/r/w780q1/storage2/f34/2d4/f29/f342d4f29e81681695372a22005af8a2.jpg)
Край тени просто размывается. При различном значении spread radius видим следующее:
![](https://habrastorage.org/r/w780q1/storage2/d1f/580/9e4/d1f5809e4205aed832509ee5a4241a55.jpg)
В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius, то они будут равны 0.
Синтаксис очень похож на box-shadow:
![](https://habrastorage.org/r/w780q1/storage2/98e/b66/109/98eb6610953d00048e6f970348dd4717.jpg)
Значения аналогичные, только нет spread-shadow. Пример использования:
![](https://habrastorage.org/r/w780q1/storage2/4dd/0ef/742/4dd0ef742dca5d3bbc130038ae8bb4cb.jpg)
Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:
![](https://habrastorage.org/r/w780q1/storage2/ca0/d86/3b5/ca0d863b5cc4a5a0247c544bc6ba6bf7.jpg)
Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):
![](https://habrastorage.org/r/w780q1/storage2/239/7ba/e1d/2397bae1d5b39ee6f3748b5c7fda810d.jpg)
Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:
![](https://habrastorage.org/r/w780q1/storage2/a29/091/948/a29091948999b91e194c811110209bde.jpg)
Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div. Для начала вот обычный код картинки:
Логично предположить, что добавить тень можно так:
Но тень не видно:
![](https://habrastorage.org/r/w780q1/storage2/05f/139/4d8/05f1394d8c40b2f0d6321494662baefc.jpg)
Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый — это обернуть картинку в обычный div:
![](https://habrastorage.org/r/w780q1/storage2/e6b/5a9/d4f/e6b5a9d4f4767a794429e6aba7d31c98.jpg)
Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ — это установить изображение фоном нужного блока:
![](https://habrastorage.org/r/w780q1/storage2/e6b/5a9/d4f/e6b5a9d4f4767a794429e6aba7d31c98.jpg)
Вот, что может получится при использовании внутренних теней:
![](https://habrastorage.org/r/w780q1/storage2/67c/c3d/601/67cc3d601a347637734e420e8283c754.jpg)
Для реализации внутренней тени текста простое добавление в код inset не работает:
![](https://habrastorage.org/r/w780q1/storage2/a57/d10/0df/a57d100df81b50f2bc87bd3847f53191.jpg)
Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:
Вот, что получается:
![](https://habrastorage.org/r/w780q1/storage2/49c/136/0ee/49c1360ee718aefaeaad12c40fd7cccd.jpg)
Добавляем секретный ингредиент background-clip, который обрезает все, что выходит за пределы текста (на темный фон):
![](https://habrastorage.org/r/w780q1/storage2/28e/99b/666/28e99b66657d84ebfb4194451110ab1b.jpg)
Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:
![](https://habrastorage.org/r/w780q1/storage2/06a/6cc/18c/06a6cc18c133766ee90db526e64ce7aa.jpg)
Проверить поддержку background-clip браузерами можно на caniuse.
![](https://habrastorage.org/r/w780q1/storage2/80c/60a/8ea/80c60a8ea117fcd997a572324aa128e1.jpg)
![](https://habrastorage.org/storage2/11d/628/168/11d628168cc4e6a87dcbb3c3d26e024e.png)
Синтаксис
Прежде всего рассмотрим два основных способа реализации теней в CSS.
box-shadow
Конструкция box-shadow содержит несколько различных значений:
![](https://habrastorage.org/storage2/dac/9ee/ecf/dac9eeecff5561b4e60ec9574491b50e.jpg)
Horizontal offset и vertical offset — горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:
![](https://habrastorage.org/storage2/ffe/31b/d83/ffe31bd8396826bd4bf1437a65aedc83.jpg)
Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:
![](https://habrastorage.org/storage2/f34/2d4/f29/f342d4f29e81681695372a22005af8a2.jpg)
Край тени просто размывается. При различном значении spread radius видим следующее:
![](https://habrastorage.org/storage2/d1f/580/9e4/d1f5809e4205aed832509ee5a4241a55.jpg)
В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius, то они будут равны 0.
text-shadow
Синтаксис очень похож на box-shadow:
![](https://habrastorage.org/storage2/98e/b66/109/98eb6610953d00048e6f970348dd4717.jpg)
Значения аналогичные, только нет spread-shadow. Пример использования:
![](https://habrastorage.org/storage2/4dd/0ef/742/4dd0ef742dca5d3bbc130038ae8bb4cb.jpg)
Inset в box-shadow
Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:
![](https://habrastorage.org/storage2/ca0/d86/3b5/ca0d863b5cc4a5a0247c544bc6ba6bf7.jpg)
Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):
![](https://habrastorage.org/storage2/239/7ba/e1d/2397bae1d5b39ee6f3748b5c7fda810d.jpg)
Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:
![](https://habrastorage.org/storage2/a29/091/948/a29091948999b91e194c811110209bde.jpg)
Изображения с тенями
Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div. Для начала вот обычный код картинки:
<img src="1450826938745827786460" alt="airplane">
Логично предположить, что добавить тень можно так:
img {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}
Но тень не видно:
![](https://habrastorage.org/storage2/05f/139/4d8/05f1394d8c40b2f0d6321494662baefc.jpg)
Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый — это обернуть картинку в обычный div:
<div>
<img src="1450826938745827786460" 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;
}
![](https://habrastorage.org/storage2/e6b/5a9/d4f/e6b5a9d4f4767a794429e6aba7d31c98.jpg)
Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ — это установить изображение фоном нужного блока:
<div>
<!-- пустой div -->
</div>
div {
height: 200px;
width: 400px;
background: url(http://lorempixum.com/400/200/transport/2);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}
![](https://habrastorage.org/storage2/e6b/5a9/d4f/e6b5a9d4f4767a794429e6aba7d31c98.jpg)
Вот, что может получится при использовании внутренних теней:
![](https://habrastorage.org/storage2/67c/c3d/601/67cc3d601a347637734e420e8283c754.jpg)
Inset в text-shadow
Для реализации внутренней тени текста простое добавление в код inset не работает:
![](https://habrastorage.org/storage2/a57/d10/0df/a57d100df81b50f2bc87bd3847f53191.jpg)
Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:
h1 {
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
}
Вот, что получается:
![](https://habrastorage.org/storage2/49c/136/0ee/49c1360ee718aefaeaad12c40fd7cccd.jpg)
Добавляем секретный ингредиент 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;
}
![](https://habrastorage.org/storage2/28e/99b/666/28e99b66657d84ebfb4194451110ab1b.jpg)
Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:
![](https://habrastorage.org/storage2/06a/6cc/18c/06a6cc18c133766ee90db526e64ce7aa.jpg)
Поддержка браузерами
Проверить поддержку background-clip браузерами можно на caniuse.
![](https://habrastorage.org/storage2/80c/60a/8ea/80c60a8ea117fcd997a572324aa128e1.jpg)