Тінь блоку в CSS
Вивчаємо властивість box-shadow та створюємо зовнішні й внутрішні тіні блоків із різними зміщеннями, розмиттям і напрямками.
Властивість box-shadow
Властивість box-shadow дозволяє додати тінь до блоку. На відміну від text-shadow, вона створює тінь навколо самого елемента.
box-shadow: зміщення-по-горизонталі зміщення-по-вертикалі розмиття колір;- Перше значення — горизонтальне зміщення тіні.
- Друге значення — вертикальне зміщення тіні.
- Третє значення — розмиття тіні.
- Четверте значення — колір тіні.
Зовнішня тінь
.box {
width: 200px;
height: 200px;
background-color: lightgray;
box-shadow: 20px 15px 5px red;
}Внутрішня тінь
Щоб зробити тінь внутрішньою, перед значеннями зміщення додають ключове слово inset.
.box {
box-shadow: inset 0 0 5px black;
}Зміщення тіні
/* Вправо */
box-shadow: 20px 0 0 red;
/* Вліво */
box-shadow: -20px 0 0 red;
/* Вниз */
box-shadow: 0 15px 0 red;
/* Вгору */
box-shadow: 0 -15px 0 red;Декілька тіней
До одного блоку можна застосувати декілька тіней. Їх потрібно записати через кому.
.box {
box-shadow:
0 -15px 5px red,
0 15px 5px blue;
}Тіні з чотирьох сторін
.box {
box-shadow:
0 -30px 0 red,
30px 0 0 green,
0 30px 0 blue,
-30px 0 0 orange;
}У цьому прикладі кожна тінь зміщена на 30px тільки в одному напрямку. Відсутність розмиття дозволяє отримати чіткі смуги з чотирьох сторін блоку.
Для внутрішньої тіні використовуйте inset. Від'ємне горизонтальне значення зміщує тінь вліво, від'ємне вертикальне — вгору.
Практичне завдання
- №1. Створіть блок 200×200px і додайте йому червону тінь: 20px вправо, 15px вниз, розмиття 5px.
- №2. Додайте зелену тінь: 20px вправо, 15px вгору, без розмиття.
- №3. Додайте внутрішню чорну тінь без зміщення та з розмиттям 5px.
- №4. Додайте внутрішню чорну тінь: 4px вправо, 3px вниз, розмиття 3px.
- №5. Додайте блоку дві тіні: одну зверху, іншу знизу.
- №6. Додайте чотири тіні так, щоб кожна була з окремого боку блоку, зі зміщенням 30px і без розмиття.
<!-- Початковий код -->
<div class="box"></div>💡 Показати підказку
Для внутрішньої тіні використовуйте inset. Для зміщення вгору або вліво використовуйте від'ємні значення. Декілька тіней розділяються комою.
✅ Показати відповідь
/* Базові параметри */
.box {
width: 200px;
height: 200px;
background-color: lightgray;
}
/* №1 */
.box {
box-shadow: 20px 15px 5px red;
}
/* №2 */
.box {
box-shadow: 20px -15px 0 green;
}
/* №3 */
.box {
box-shadow: inset 0 0 5px black;
}
/* №4 */
.box {
box-shadow: inset 4px 3px 3px black;
}
/* №5 */
.box {
box-shadow:
0 -15px 5px red,
0 15px 5px green;
}
/* №6 */
.box {
box-shadow:
0 -30px 0 red,
30px 0 0 green,
0 30px 0 blue,
-30px 0 0 orange;
}