Свойство box-shadow в CSS служит эффективным механизмом для разработчиков, позволяющим разработчикам придавать глубину и размерность элементам HTML. Добавляя тени в элементы, можно повысить реалистичность и визуальную привлекательность пользовательского интерфейса. В этой статье будут рассмотрены основы box-shadow и предложены примеры, которые помогут вам освоить его применение.

Понимание основ

Свойство box-shadow состоит из нескольких значений, которые определяют, как будет выглядеть тень. Вот основной синтаксис:

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: Этот параметр определяет горизонтальное смещение тени. Положительные значения смещают тень вправо, отрицательные — влево.
• offset-y: Этот параметр указывает вертикальное смещение тени. Положительные значения перемещают тень вниз, отрицательные значения поднимают ее.
• радиус размытия (необязательно): Этот параметр регулирует мягкость тени. Более высокое значение приводит к более размытой тени. Если этот параметр не указан, значение по умолчанию равно 0, что создает отчетливую тень.
• spread-radius (необязательно): Этот параметр влияет на размеры тени. Положительные значения увеличивают размер тени, отрицательные — уменьшают.
• color: этот атрибут определяет цвет тени. Это может быть любое допустимое представление цвета CSS, например #000, rgba(0,0,0,0.5) или hsl(0, 0%, 50%).

Пример: базовая тень блока

Давайте посмотрим простой пример применения тени к кнопке:

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

В этом случае тень смещается на 5 пикселей по горизонтали и вертикали, имеет радиус размытия 10 пикселей и окрашена в черный цвет с коэффициентом 0,3 непрозрачность.

Пример: вставленные тени

box-shadow также поддерживает ключевое слово inset, которое помещает тень внутрь элемента, придавая ему эффект углубления.

div {
  box-shadow: inset 0 0 10px #000;
}

Здесь тень помещается внутри div, создавая эффект, как будто содержимое сдвинуто внутрь.

Дополнительные советы

• У вас есть возможность создавать несколько теней, разделяя каждую спецификацию box-shadow запятой. Эта техника позволяет создавать сложные многослойные эффекты теней.

box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

• Эффекты тени часто используются для создания взаимодействия при наведении, повышая интерактивность кнопок или карточек.

button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}

Для тех, кто предпочитает более визуальный подход, воспользуйтесь CSS-генератором Box-Shadow. Этот инструмент позволяет вам легко создавать собственные эффекты тени блока, не написав никакого кода и не сохраняя пресеты.