Как добавить тень к блоку?
К любому блочному элементу можно добавить тень с помощью стилевого свойства 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>
Автор: Влад Мержевич
Источник: webref.ru