Как сделать тень у картинки в css

CSS — два способа создания тени для картинки

Столкнулся с интересным примером или задачей — не знаю, как сказать.

Состоит в том, чтобы сделать для картинки тень, причем внутреннюю тень. Казалось бы, задачу просто решить — с помощью

box-shadow

text-shadow

Но не все так просто. В Интернете есть хорошие статьи на эту тему, в частности, на Хабре имеет очень детальный обзор данного способа.

Но пример так мне понравился, что решил его описать у себя — повторение мать учения, как говорится.

Данную задачу можно решить двумя способами. Ни один из них не является достаточно универсальным, это всего лишь выход из положения. Итак, имеется изображение, для которого нужно создать внутреннюю тень.

Первый способ — это “обернуть” ее в дополнительный блок, которому прописать внутреннюю тень. Главное тут — не забыть “опустить” изображение внутри блока, чтобы тень “легла” на нее.

Код такого способа представлен ниже:

.block2 box-shadow: inset 0 0 12px 8px rgba(0,0,0,.6); width: 481px; height: 361px; background: url(images/charlize_theron_2.jpg) 0 0 no-repeat; >

Картинка — результат работы этого кода:

Код более краткий. Единственный минус — изображение должно быть только в качестве фона для блока.

Ошибка с версией Node.js

Довольно часто в своей практике сталкиваюсь с такой ошибкой, когда запускаю локально сторонний проект:«`bash$ npm run start> dom-moving-. … Continue reading

Тени¶

Допустим, вам прислали проект, который нужно создать, и в этом проекте есть изображение футболки, вырезанное, с падающей тенью. Дизайнер говорит вам, что изображение продукта является динамическим и может обновляться через систему управления контентом, поэтому и падающая тень должна быть динамической. Вместо футболки изображение может быть козырьком, шортами или любым другим предметом. Как это сделать с помощью CSS?

В CSS есть свойства box-shadow и text-shadow , но картинка — это не текст, поэтому использовать text-shadow нельзя. Если использовать box-shadow , то тень будет лежать на окружающем блоке, а не на футболке.

К счастью, есть и другой вариант: фильтр drop-shadow() . Он позволяет сделать именно то, о чем просил дизайнер. Существует множество вариантов использования теней в CSS, каждый из которых предназначен для разных случаев.

Тень блока¶

Свойство box-shadow предназначено для добавления тени к блоку HTML-элемента. Оно работает для блочных и инлайн-элементов.

1 2 3

.my-element  box-shadow: 5px 5px 20px 5px #000; > 

Порядок значений для box-shadow следующий:

1. Горизонтальное смещение: положительное число сдвигает его влево, а отрицательное — вправо.
2. Вертикальное смещение: положительное число сдвигает его сверху вниз, а отрицательное — снизу вверх.
3. Радиус размытия: при большем значении тень будет более размытой, а при меньшем — более резкой.
4. Радиус размытия (необязательно): большее число увеличивает размер тени, а меньшее — уменьшает, при этом радиус размытия будет равен радиусу размытия, если он установлен в 0 .
5. Цвет: Любое допустимое значение цвета. Если он не задан, то будет использоваться вычисленный цвет текста.

Чтобы сделать тень блока внутренней, а не внешней по умолчанию, добавьте ключевое слово inset перед другими свойствами.

1 2 3 4 5 6 7 8 9

/* Outer shadow */ .my-element  box-shadow: 5px 5px 20px 5px #000; > /* Inner shadow */ .my-element  box-shadow: inset 5px 5px 20px 5px #000; > 

Множественные тени¶

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

1 2 3 4 5 6

.my-element  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue, inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue; > 

Свойства, влияющие на тень блока¶

Добавление border-radius к блоку также повлияет на форму его тени. Это связано с тем, что CSS создает тень на основе формы блока, как будто на него направлен свет.

1 2 3 4

.my-element  box-shadow: 0px 0px 20px 5px darkslateblue; border-radius: 25px; > 

Если блок с box-shadow находится в контейнере, имеющем overflow: hidden , то тень не выйдет за пределы этого переполнения.

1 2 3 4 5

div class="my-parent"> div class="my-shadow"> My shadow is hidden by my parent. div> div> 

 1 2 3 4 5 6 7 8 9 10 11 12 13

.my-parent, .my-shadow  width: 250px; height: 250px; > .my-shadow  box-shadow: 0px 0px 20px 5px darkslateblue; > .my-parent  overflow: hidden; > 

Тень текста¶

Свойство text-shadow очень похоже на свойство box-shadow . Только работает оно для текстовых узлов.

1 2 3

.my-element  text-shadow: 3px 3px 3px hotpink; > 

Значения для text-shadow те же, что и для box-shadow , и расположены в том же порядке. Единственное отличие заключается в том, что text-shadow не имеет значения spread и ключевого слова inset .

Значения для text-shadow те же, что и для box-shadow , и расположены в том же порядке. Единственное отличие заключается в том, что text-shadow не имеет значения spread и ключевого слова inset .

1 2 3 4

.my-element  text-shadow: 3px 3px 3px gold; color: rgb(0 0 0 / 70%); > 

Множественные тени текста¶

С помощью text-shadow , как и с помощью box-shadow , можно добавлять сколько угодно теней. Добавьте коллекцию наборов значений, разделенных запятыми, и вы сможете создавать действительно интересные текстовые эффекты, например, 3D-текст.

1 2 3 4

.my-element  text-shadow: 1px 1px 0px white, 2px 2px 0px firebrick; color: darkslategray; > 

drop-shadow() ¶

Чтобы получить падающую тень, повторяющую все возможные изгибы изображения, используйте фильтр CSS drop-shadow . Эта тень применяется к альфа-маске, что делает ее очень удобной для добавления тени к вырезанному изображению, как в случае, показанном во введении этого модуля.

1 2 3

.my-image  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%)); > 

Мы рассмотрим CSS «фильтры» в другом модуле, но вкратце можно сказать, что фильтры позволяют применять различные графические эффекты к пикселям элемента.

Фильтр drop-shadow имеет те же значения, что и box-shadow , однако ключевое слово inset и значение spread не допускаются. Вы можете добавить столько теней, сколько захотите, добавив несколько экземпляров значений drop-shadow к свойству filter . Каждая тень будет использовать предыдущую тень в качестве опорной точки позиционирования.

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

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

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

• Содержание:
• 1. Синтаксис свойства box-shadow
• 2. Примеры тени для блока
• 3. Эффекты для тени при наведении
• 4. Анимация тени

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

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 прикрепляет одну или несколько теней к блоку. Свойство принимает либо значение none , которое указывает на отсутствие теней, либо список теней через запятую, упорядоченный от начала к концу.

Каждая тень является отдельной тенью, представленной от 2 до 4-х значений длины, необязательным цветом и необязательным ключевым словом inset . Допустимые длины 0 ; опущенные цвета по умолчанию равны значению свойства color .

Свойство не наследуется.

box-shadow
Значения:
x-offset	Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево.
y-offset	Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.
blur	Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени.
растяжение	Задает расстояние, на которое тень увеличивается. Положительные значения заставляют тень расширяться во всех направлениях на указанный радиус. Отрицательные значения заставляют тень сжиматься. Для внутренних теней расширение тени означает сжатие формы периметра тени.
цвет	Задает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства color. Для Safari цвет тени указывать обязательно.
inset	Изменяет отбрасываемую тень блока с внешней тени на внутреннюю.
none	Значение по умолчанию, означает отсутствие тени.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Эффекты тени применяются следующим образом: первая тень находится сверху, а остальные — сзади. Тени не влияют на компоновку и могут перекрывать другие элементы или их тени. С точки зрения контекстов укладки и порядка рисования внешние тени элемента рисуются непосредственно под фоном этого элемента, а внутренние тени элемента рисуются непосредственно над фоном этого элемента (ниже border и border-image , если таковые имеются).

Если элемент имеет несколько ящиков, все они получают тени, но тени рисуются только там, где также будут нарисованы границы; см. box-decoration-break.

Тени не вызывают прокрутку или не увеличивают размер прокручиваемой области.

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

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

Синтаксис

Прежде всего рассмотрим два основных способа реализации теней в CSS.

box-shadow

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

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

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

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

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

text-shadow

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

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

Inset в box-shadow

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

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

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

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

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

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

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

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

div < height: 200px; width: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); >img

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

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

Inset в text-shadow

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

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

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

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

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

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

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