Свойство box-shadow в CSS используется для добавления тени к элементам на веб-страницах. Этот инструмент помогает создавать разнообразные визуальные эффекты, такие как объем, глубина, освещение и даже имитации отражения. В данной статье мы детально разберём синтаксис этого свойства, его ключевые параметры и предоставим практические примеры использования.
Синтаксис
Синтаксис свойства box-shadow состоит из следующих параметров:
box-shadow: h-offset v-offset blur spread color inset;Каждый параметр выполняет свою роль:
- h-offset (горизонтальное смещение): Определяет расстояние по горизонтали от элемента до тени. Положительное значение смещает тень вправо, отрицательное – влево.
- v-offset (вертикальное смещение): Определяет расстояние по вертикали от элемента до тени. Положительное значение смещает тень вниз, отрицательное – вверх.
- blur (размытие): Радиус размытия тени. Чем больше это значение, тем более размыта будет тень.
- spread (расширение): Увеличивает или уменьшает размер тени. Положительные значения увеличивают её размеры, а отрицательные уменьшают.
- color (цвет): Цвет тени. Если не указан, то браузер использует стандартный цвет текста.
- inset (внутренняя тень): Если указано, то тень будет отображаться внутри элемента вместо внешней стороны.
Основные примеры использования
Простой пример внешней тени
Создаем простую внешнюю тень с использованием стандартных значений:
.element {
box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.7);
}Эта тень будет иметь горизонтальное смещение 5 пикселей вправо, вертикальное смещение 10 пикселей вниз, радиус размытия 15 пикселей и черный цвет с прозрачностью 70%.
Пример внутренней тени
Для создания внутренней тени используем ключевое слово inset:
.element {
box-shadow: 0 0 20px 5px #8888 inset;
}Эта внутренняя тень имеет нулевое смещение по горизонтали и вертикали, радиус размытия 20 пикселей, расширение 5 пикселей и серый цвет.
Несколько теней
Можно задать несколько теней одновременно, разделив их запятыми:
.element {
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5), /* красная тень */
0 0 20px rgba(0, 128, 0, 0.5); /* зеленая тень */
}Этот пример создает две наложенные друг на друга тени: красную и зелёную.
Расширенные возможности
Прозрачность через hsla
Кроме использования rgba, можно применять функцию hsla для задания цвета с альфа-каналом:
box-shadow: 5px 5px 10px hsla(240, 100%, 50%, 0.75);Отсутствие размытия
Для создания чёткой тени без эффекта размытия устанавливаем параметр blur равным нулю:
box-shadow: 10px 10px 0 black;Комбинирование внешних и внутренних теней
Интересный объёмный эффект можно получить, сочетая внутренние и внешние тени:
.double-shadow {
width: 150px;
height: 80px;
background-color: lightgray;
box-shadow:
0 0 10px rgba(0, 0, 0, 0.5) inset,
0 0 10px rgba(0, 0, 0, 0.5);
}Практическое применение
Эффект приподнятого элемента
Создадим кнопку, которая будет выглядеть приподнятой над поверхностью при наведении курсора:
 |
 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Example</title>
<style> .button { background-color: #4CAF50; /* зеленый фон */ padding: 12px 24px; border-radius: 4px; /* скругление углов */ cursor: pointer; transition: box-shadow 0.3s ease-in-out; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); } .button:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35); } </style>
</head>
<body>
<button class="button">Нажми меня!</button>
</body>
</html>При наведении курсора на эту кнопку тень увеличивается, создавая иллюзию подъема.
Эффект погружения
Элемент с эффектом погружения внутрь страницы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Example</title>
<style> .card { width: 200px; height: 300px; background-color: white; border-radius: 8px; /* скругленные углы карточки */ box-shadow: 0 0 16px rgba(0, 0, 0, 0.1) inset; } </style>
</head>
<body>
<div class="card"></div>
</body>
</html>Эта внутренняя тень создаёт впечатление, что карточка немного утоплена в поверхность.
Имитация подсветки снизу
Добавляем яркий акцент снизу элемента:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Example</title>
<style> .highlighted-text { font-size: 32px; text-align: center; box-shadow: 0 5px 0 #FFD700; } </style>
</head>
<body>
<p class="highlighted-text">Подсветка снизу!</p>
</body>
</html>Такой подход создаёт эффект яркой жёлтой линии под текстом, делая его визуально выделенным.
Свойство box-shadow предоставляет мощные инструменты для создания разнообразных визуальных эффектов. Его использование совместно с другими свойствами CSS, такими как border-radius, background, transform и псевдоклассы, открывает огромные возможности для разработки привлекательных и функциональных пользовательских интерфейсов.
Загрузка...