Свойство CSS box-shadow
К элементу можно добавить одну или несколько теней с помощью свойства CSS box-shadow.
Строго необходимы только горизонтальное и вертикальное смещения.
Кроме них, вы можете выбрать цвет, задать радиус растяжения, добавить размытие или превратить внешнюю тень во внутреннюю (inset).
Горизонтальная и вертикальная тень в CSS
Для простой тени достаточно двух смещений: горизонтального и вертикального.
Если не указать цвет, тень получит текущий цвет текста.
Пример
Тень, заданная только двумя смещениями:
Prompt
Создайте страницу с элементом div, у которого box-shadow с горизонтальным смещением 10px и вертикальным смещением 10px, без размытия, без растяжения, с использованием цвета тени по умолчанию.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal and Vertical Shadow</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px</h1>
<div>A div element with a box-shadow</div>
</body>
</html>
Укажите цвет для тени
Добавленный параметр цвета определяет, какого цвета будет тень.
Пример
Теперь у тени свой цвет:
Prompt
Создайте страницу с элементом div, у которого box-shadow с горизонтальным смещением 10px, вертикальным смещением 10px и цветом тени lightblue.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Color</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px lightblue</h1>
<div>A div element with a lightblue box-shadow</div>
</body>
</html>
Добавьте эффект размытия к тени
Мягкостью тени управляет параметр размытия, который задаёт её радиус размытия. Чем больше число, тем сильнее размыта тень.
Пример
Здесь края тени смягчены:
Prompt
Создайте страницу с элементом div, у которого box-shadow с горизонтальным смещением 10px, вертикальным смещением 10px, радиусом размытия 5px и цветом тени lightblue.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Effect</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px 5px lightblue</h1>
<div>A div element with a 5px blurred, lightblue box-shadow</div>
</body>
</html>
Задайте радиус растяжения тени
То, насколько растягивается тень, зависит от параметра растяжения, то есть её радиуса растяжения.
Положительные значения увеличивают тень, а отрицательные уменьшают её.
Пример
Здесь тень увеличивается за счёт радиуса растяжения:
Prompt
Создайте страницу с элементом div, у которого box-shadow с горизонтальным смещением 10px, вертикальным смещением 10px, радиусом размытия 5px, радиусом растяжения 12px и цветом тени lightblue.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spread Radius</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px 5px 12px lightblue</h1>
<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px</div>
</body>
</html>
Задайте параметр inset
По умолчанию тень внешняя (outset). С параметром inset она перемещается внутрь рамки элемента и становится внутренней.
Пример
Та же тень, теперь с inset:
Prompt
Создайте страницу с элементом div, у которого внутренний (inset) box-shadow с горизонтальным смещением 10px, вертикальным смещением 10px, размытием 5px и цветом lightblue.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Shadow</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px 5px lightblue inset</h1>
<div>A div element with a blurred, lightblue, inset box-shadow</div>
</body>
</html>
Добавление нескольких теней
Элемент не ограничен одной тенью.
Перечислите столько теней, сколько вам нужно, разделяя их запятыми.
Пример
Prompt
Создайте страницу с элементом div, у которого несколько box-shadow: 5px 5px 8px синий, 10px 10px 8px красный и 15px 15px 8px зелёный.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Shadows</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}
</style>
</head>
<body>
<h1>Multiple Shadows</h1>
<div>A div element with multiple shadows</div>
</body>
</html>
Создание карточек с тенью
С помощью box-shadow можно также создавать карточки, похожие на бумагу.
Текстовая карточка
Текстовое содержимое находится внутри этой карточки, которую приподнимает лёгкая тень:
Prompt
Создайте страницу с div в стиле карточки (шириной 250px, текст по центру), используя box-shadow со значениями «0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)». Включите заголовок «1», дату «1 января 2021» и местоположение «Хардангер, Норвегия».
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Card - Text</title>
<style>
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<h1>Shadow Cards</h1>
<div class="card">
<div class="container">
<h1>1</h1>
<p>January 1, 2021</p>
<p>Hardanger, Norway</p>
</div>
</div>
</body>
</html>
Карточка с изображением
В этой карточке над текстовым содержимым расположено изображение:
Prompt
Создайте страницу с div в стиле карточки (шириной 250px, текст по центру), используя box-shadow со значениями «0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)». Включите изображение-заполнитель сверху и абзац с заголовком «John Doe» и описательным текстом под ним.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Card - Image</title>
<style>
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<h1>Shadow Cards</h1>
<div class="card">
<img src="img_avatar.png" alt="John" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</body>
</html>