02 Июн 2023
2 мин
105

Как добавить тень блоку с помощью CSS

Узнайте, как легко добавить эффектные тени блокам на вашем сайте с помощью CSS и свойства box-shadow в нашей практической статье для новичков!

Содержание

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

Синтаксис box-shadow

Свойство box-shadow принимает следующие значения:

box-shadow: [горизонтальное смещение] [вертикальное смещение] [радиус размытия] [растяжение тени] [цвет тени];
  • Горизонтальное смещение: смещение тени по горизонтали. Положительное значение смещает тень вправо, отрицательное – влево.
  • Вертикальное смещение: смещение тени по вертикали. Положительное значение смещает тень вниз, отрицательное – вверх.
  • Радиус размытия: определяет степень размытия тени. Чем больше значение, тем сильнее размытие.
  • Растяжение тени (необязательный параметр): определяет размер тени. Положительное значение увеличивает тень, отрицательное – уменьшает.
  • Цвет тени: определяет цвет тени. Может быть задан в различных форматах (например, HEX, RGB, RGBA).

Примеры использования box-shadow

Пример 1: Простая тень

.box {
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
}

В данном примере создается тень со смещением на 2 пикселя вправо и вниз, радиусом размытия 5 пикселей и полупрозрачным черным цветом.

Пример 2: Тень с растяжением

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

Здесь тень не имеет смещения, радиус размытия составляет 5 пикселей, а растяжение тени – 5 пикселей. Тень имеет полупрозрачный черный цвет.

Заключение

Теперь вы знаете, как добавить тень блоку с помощью CSS и свойства box-shadow. Это полезный инструмент для создания визуальных эффектов на вашем сайте. Не бойтесь экспериментировать с параметрами и использовать тени, чтобы сделать ваш дизайн более интересным и уникальным. 😉

Добавить комментарий