Box Shadow: Создание эффектных теней в CSS
Box shadow - это свойство CSS, которое позволяет добавлять тень вокруг элементов. Оно просто в использовании и может быть использовано для создания различных эффектов дизайна веб-страниц. Синтаксис box shadow принимает четыре параметра: горизонтальный отступ, вертикальный отступ, размытие и цвет.
Примеры кода:
Добавление обычной тени:
.box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
В этом примере мы добавляем тень со всеми параметрами: горизонтальный отступ 2px, вертикальный отступ 2px, размытие 4px и цвет rgba(0, 0, 0, 0.4).
Добавление нескольких теней:
.box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4),
-2px -2px 4px rgba(255, 255, 255, 0.4);
}
В этом примере мы добавляем две тени: одну со всеми параметрами и цветом rgba(0, 0, 0, 0.4), а другую с теми же параметрами, но со светлым цветом rgba(255, 255, 255, 0.4), чтобы создать эффект вогнутости.
Добавление внутренней тени:
.box {
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
}
Этот пример добавляет внутреннюю тень в элемент с помощью ключевого слова inset перед параметрами. В результате будет создан эффект вырезанной части элемента.
Box shadow - достаточно гибкий инструмент и может быть использован для различных эффектов тени, включая тени для кнопок, карточек, меню и других элементов дизайна веб-страниц.