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 - достаточно гибкий инструмент и может быть использован для различных эффектов тени, включая тени для кнопок, карточек, меню и других элементов дизайна веб-страниц.