В данной статье мы разберемся, как добавить тень блоку с помощью 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. Это полезный инструмент для создания визуальных эффектов на вашем сайте. Не бойтесь экспериментировать с параметрами и использовать тени, чтобы сделать ваш дизайн более интересным и уникальным. 😉
Добавить комментарий