Вид тени под изображением зависит от наличия в нём прозрачных участков — если они есть, то тень станет выделять контуры картинки (рис. 1). Для изображения без прозрачности тень будет в виде прямоугольника (рис. 2).
Рис. 1. Тень под изображением с прозрачностью
Рис. 2. Тень под изображением без прозрачности
В зависимости от типа изображения и желаемого результата, рассмотрим два способа добавления тени.
Использование функции drop-shadow()
Стилевая функция drop-shadow() позволяет добавлять тень к изображению с поддержкой прозрачности (PNG, WebP, GIF) и даже к SVG. Сама функция выступает как значение свойства filter и содержит ряд параметров, управляющих положением и видом тени (рис. 3).
Рис. 3. Параметры drop-shadow()
Первые два параметра устанавливают положение тени — положительные значения смещают тень вправо и вниз, отрицательные значения влево и вверх. Третий параметр управляет размытием тени, чем больше значение, тем «мягче» тень. Последний параметр задаёт цвет тени в любом формате цвета CSS. К примеру, функция rgba() позволяет сделать тень полупрозрачной.
В примере 1 drop-shadow() применяется к картинке в формате SVG.
Пример 1. Свойство filter и функция drop-shadow()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тень</title>
<style>
body {
background-color: #ccc; /* Цвет фона */
}
.shadow {
filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); /* Параметры тени */
}
</style>
</head>
<body>
<img src="image/search.svg" alt="" width="100">
<img src="image/search.svg" alt="" width="100" class="shadow">
</body>
</html>
В данном примере используется класс .shadow, добавление которого к элементу <img> создаёт тень желаемого вида.
Использование box-shadow
Свойство box-shadow добавляет прямоугольную тень к элементу. Оно работает самостоятельно и по своим параметрам (рис. 4) похожа на функцию drop-shadow().
Рис. 4. Параметры box-shadow
В примере 2 показано добавление тени к одному из двух изображений.
Пример 2. Свойство box-shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тень</title>
<style>
.card {
margin: 0 1em 1em 0; /* Расстояние между картинками */
}
.shadow {
box-shadow: 0 0 10px rgba(0,0,0,0.8); /* Параметры тени */
}
</style>
</head>
<body>
<img src="image/aquaria1.jpg" alt="" class="card shadow">
<img src="image/aquaria2.jpg" alt="" class="card">
</body>
</html>