К любому блочному элементу можно добавить тень с помощью стилевого свойства box-shadow. Его параметры отвечают за положение тени, степень размытия и цвет тени (рис. 1).
Рис. 1. Параметры box-shadow
В примере 1 показано добавление тени к карточкам, в роли которых выступает <div> с классом .card. Тень позволяет визуально выделить карточку и отделить её от фона.
Пример 1. Использование box-shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тень</title>
<style>
body {
background-color: #fafafa; /* Цвет фона */
}
.cards {
display: flex; /* Карточки располагаются рядом */
flex-wrap: wrap; /* Перенос на другую строку */
}
.card {
background-color: #fff; /* Цвет фона */
width: 150px; height: 150px; /* Размеры */
margin: 0 1.5rem 1.5rem 0; /* Расстояние справа и снизу */
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); /* Параметры тени */
display: flex; /* Для выравнивания текста в карточке */
align-items: center; /* По центру вертикали */
justify-content: center; /* По центру горизонтали */
font-size: 1.6em; /* Размер шрифта */
}
</style>
</head>
<body>
<div class="cards">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
</div>
</body>
</html>
К одному элементу в box-shadow допустимо добавлять несколько теней с разными параметрами, перечисляя их через запятую. Это позволяет усиливать тень в нужных местах и делать с ней разные эффекты (пример 2).
Пример 2. Две тени для одного элемента
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тень</title>
<style>
body {
background-color: #fafafa; /* Цвет фона */
}
.cards {
display: flex; /* Карточки располагаются рядом */
flex-wrap: wrap; /* Перенос на другую строку */
}
.card {
background-color: #fff; /* Цвет фона */
width: 150px; height: 150px; /* Размеры */
margin: 0 1.5rem 1.5rem 0; /* Расстояние справа и снизу */
box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 6px 6px rgba(0,0,0,0.3); /* Параметры теней */
display: flex; /* Для выравнивания текста в карточке */
align-items: center; /* По центру вертикали */
justify-content: center; /* По центру горизонтали */
font-size: 1.6em; /* Размер шрифта */
}
</style>
</head>
<body>
<div class="cards">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
</div>
</body>
</html>
Варианты теней для блока можно увидеть на этом сайте. С помощью кнопки Copy код для box-shadow можно скопировать и вставить себе в CSS.
Обычно тень делается чёрного полупрозрачного цвета, чтобы она выглядела привычно и правдоподобно. Свойство box-shadow позволяет установить тень произвольного цвета, что может привести к интересным эффектам. В примере 3 к блокам добавляется белая тень сверху и слева, которая в сочетании с чёрной тенью позволяет выделить края элемента.
Пример 3. Белая тень
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тень</title>
<style>
body {
background-color: #dde1e7; /* Цвет фона */
}
.cards {
display: flex; /* Карточки располагаются рядом */
flex-wrap: wrap; /* Перенос на другую строку */
}
.card {
width: 150px; height: 150px; /* Размеры */
margin: 0 1.5rem 1.5rem 0; /* Расстояние справа и снизу */
border-radius: 10px; /* Радиус скругления */
box-shadow:
-10px -10px 12px rgba(255,255,255,0.5),
10px 10px 12px rgba(70,70,70,0.12); /* Параметры теней */
display: flex; /* Для выравнивания текста в карточке */
align-items: center; /* По центру вертикали */
justify-content: center; /* По центру горизонтали */
font-size: 1.6em; /* Размер шрифта */
}
</style>
</head>
<body>
<div class="cards">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
</div>
</body>
</html>