6.1 Властивість box-shadow
Властивість box-shadow у CSS використовується для додавання тіні до елементів. Це властивість дозволяє створювати різноманітні візуальні ефекти, покращуючи зовнішній вигляд веб-сторінок. Розглянемо детально синтаксис, значення та приклади використання box-shadow.
Синтаксис box-shadow
Властивість box-shadow приймає одне або кілька значень, кожне з яких задає параметри тіні. Загальний синтаксис виглядає так:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Значення:
offset-x: горизонтальне зміщення тіні. Позитивні значення зміщують тінь вправо, негативні — влівоoffset-y: вертикальне зміщення тіні. Позитивні значення зміщують тінь вниз, негативні — вверхblur-radius: радіус розмиття тіні. Чим більше значення, тим більш розмитою буде тінь. Значення за замовчуванням — 0 (тінь без розмиття)spread-radius: радіус розширення тіні. Позитивні значення збільшують розмір тіні, негативні — зменшують. Значення за замовчуванням — 0color: колір тіні. Підтримуються всі кольорові формати CSS
6.2 Приклади використання
Основна тінь:
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Основна тінь</div>
</body>
Тінь із розмиттям:
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Тінь із розмиттям</div>
</body>
Тінь із розширенням:
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Тінь із розширенням</div>
</body>
Внутрішня тінь:
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Внутрішня тінь</div>
</body>
6.3 Налаштування box-shadow
Деталі налаштування box-shadow:
Зміщення тіні (offset-x і offset-y)
- Позитивні значення: тінь зміщується вправо (
offset-x) і вниз (offset-y) - Негативні значення: тінь зміщується вліво (
offset-x) і вверх (offset-y)
Розмиття тіні (blur-radius)
- Значення 0: тінь буде чіткою, без розмиття
- Позитивні значення: чим більше значення, тим більш розмитою буде тінь
Розширення тіні (spread-radius)
- Позитивні значення: тінь збільшується в розмірах
- Негативні значення: тінь зменшується в розмірах
Колір тіні (color)
Колір може задаватися в різних форматах: назва кольору, шістнадцятковий код, RGB, RGBA, HSL, HSLA.
Внутрішня тінь (inset)
Ключове слово inset створює тінь всередині елемента, що може використовуватися для створення вдавленого ефекту.
Кілька тіней із різними параметрами:
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Кілька тіней</div>
</body>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ