Что такое box-shadow в CSS?
Представьте себе монитор компьютера или дисплей смартфона. По своей природе он плоский. Все элементы, которые мы размещаем на веб-странице (текст, картинки, кнопки, блоки) изначально тоже плоские. Выглядит аккуратно, но иногда скучновато. Не хватает ощущения объема, понимания, какой элемент находится «ближе» к нам, а какой «дальше».
box-shadow ― это CSS-свойство, которое позволяет веб-мастерам добавить тень к любому блочному элементу на странице. Она создает иллюзию, будто элемент слегка приподнят над фоном или, наоборот, вдавлен в него.
Зачем нам вообще нужны тени в веб-дизайне? Они выполняют несколько важных функций:
- Тень помогает глазу пользователя понять структуру страницы. Элемент кажется ближе, важнее, чем элемент без тени. Это как в реальном мире: объект, отбрасывающий тень, явно существует в трехмерном пространстве. Мы можем управлять «высотой» элемента над «поверхностью» страницы, регулируя параметры тени.
- Тени часто используются для интерактивных элементов. Например, легкая тень под кнопкой делает ее более заметной. При наведении мыши тень может становиться более выраженной, подтверждая пользователю, что элемент интерактивен.
- Иногда нужно отделить один блок контента от другого, не используя жесткие рамки. Мягкая тень отлично справляется с этой задачей, создавая плавный переход. Также она может выделить ключевой элемент, например, модальное окно или всплывающую подсказку, приглушив остальной фон.
- Аккуратно настроенные тени делают интерфейс более живым, объемным и приятным для глаз. Они помогают связать цифровой интерфейс с нашим опытом восприятия реального мира.
Важно понимать, box-shadow рисует тень именно для «коробки» элемента, учитывая его форму, включая скругленные углы. Это не тень от текста внутри элемента ― для этого есть отдельное свойство text-shadow.
Синтаксис и параметры свойства box-shadow
Чтобы создать тень, мы используем свойство box-shadow и передаем ему несколько параметров, которые определяют вид тени. Вот основной синтаксис:
box-shadow: [смещение-x] [смещение-y] [размытие] [растяжение] [цвет] [inset]; Давайте разберем каждый параметр:
- Смещение-x (горизонтальное смещение). Сдвигает тень вправо или влево относительно элемента. Положительное значение (например, 10px) сдвигает вправо, отрицательное (-10px) — влево. 0 — строго за элементом по горизонтали.
- Смещение-y (вертикальное смещение). Сдвигает вниз или вверх относительно элемента. Положительное значение (10px) сдвигает вниз, отрицательное (-10px) – вверх. 0 – строго за элементом по вертикали.
- Размытие. Определяет, насколько «мягкой» или «размытой» она будет. Чем больше значение, тем сильнее размытие. Должно иметь только положительное значение (например, 15px). 0 (значение по умолчанию) — будет резкой, с четкими краями.
- Растяжение. Увеличивает или уменьшает размер самой тени перед размытием. Положительное значение (5px) увеличивает, отрицательное (-5px) — сжимает. 0 (по умолчанию) — изначально того же размера, что и элемент.
- Цвет тени. Задает цвет тени. Значения ― любой допустимый формат цвета в CSS — имя (black, red), HEX (#000000, #cccccc), RGB (rgb(0, 0, 0)), RGBA (rgba(0, 0, 0, 0.5) для полупрозрачности), HSL, HSLA.
- inset (внутренняя). Это ключевое слово (если оно присутствует) полностью меняет тип тени — она становится внутренней, то есть рисуется внутри границ элемента, создавая эффект вдавленности.
Вы можете создавать несколько теней для одного элемента, перечисляя их параметры через запятую:
.element {
box-shadow: 5px 5px 10px rgba(0,0,0,0.3), /* Первая */
-5px -5px 10px rgba(255,255,255,0.1); /* Вторая */ } Примеры создания теней с помощью box-shadow
Лучший способ понять, как работает box-shadow — это увидеть его в действии. Давайте создадим несколько простых HTML-блоков и применим к ним разные стили теней, разбирая каждый параметр.
Подготовим «холст» — наш HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Примеры Box Shadow</title>
<link rel="stylesheet» href="style.css">
</head> <body>
<h1>Изучаем box-shadow</h1>
<div class="box base">Базовый блок</div>
<div class="box example-1">Пример 1: Простая смещенная </div>
<div class="box example-2">Пример 2: Мягкая размытая (классика)</div>
<div class="box example-3">Пример 3: Эффект свечения (без смещения)</div>
<div class="box example-4">Пример 4: Сжатая (отрицательное растяжение)</div>
<div class="box example-5">Пример 5: Несколько слоев теней</div>
</body>
</html> И базовые стили для CSS (файл style.css):
/* Зададим базовые стили для контейнера и самих блоков */
body {
font-family: sans-serif;
background-color: #f4f7f6; /* Светлый фон, чтобы тени были видны */
padding: 20px;
display: flex;
flex-direction: column; /* Расположим блоки друг под другом */
align-items: center; /* Выровняем по центру */
}
h1 {
color: #333;
margin-bottom: 40px;
}
.box {
width: 250px; /* Ширина блока */
height: 120px; /* Высота блока */
background-color: #ffffff; /* Белый фон для блока */
border-radius: 8px; /* Слегка скруглим углы */
margin-bottom: 50px; /* Отступ между блоками */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
color: #555;
border: 1px solid #e0e0e0; /* Легкая рамка для базового блока */
transition: box-shadow 0.3s ease; /* Плавный переход для тени при наведении */
}
/* Уберем рамку у блоков с примерами, тень будет выполнять разделительную функцию */
.box:not(.base) {
border: none;
}
/* Добавим легкий эффект при наведении для наглядности */
.box:not(.base):hover {
box-shadow: 0 10px 20px
rgba(0, 0, 0, 0.15); /* Увеличим при наведении */
transform: translateY(-3px); /* Слегка приподнимем блок */
transition: box-shadow 0.3s ease, transform 0.3s ease; /* Плавные переходы */
}Стили для конкретных примеров теней
/* Пример 1: Простая смещенная */
/* Смещение X=4px (вправо), Y=4px (вниз), без размытия, без растяжения, черный цвет */ .example-1 {
box-shadow: 4px 4px black;
}
/* Пример 2: Мягкая размытая (Наиболее часто используемый вариант) */
/* Смещение X=0 (по центру), Y=6px (вниз), размытие 12px, цвет черный с 10% непрозрачностью */
.example-2 {
/* Заметьте использование RGBA для полупрозрачности - это ключ к естественным теням! */
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
}
/* Пример 3: Эффект свечения (часто для активных элементов или акцентов) */
/* Без смещения (0 0), размытие 15px, растяжение 5px (увеличивает размер тени ДО размытия), цвет синий */
.example-3 {
background-color: #4a90e2; /* Изменим фон блока для наглядности */
color: white;
/* Положительное растяжение делает тень больше самого элемента */
box-shadow: 0 0 15px 5px #4a90e2;
}
.example-3:hover {
/* Переопределим hover для сохранения эффекта свечения */
box-shadow: 0 0 25px 8px #4a90e2;
transform: translateY(-3px);
}
/* Пример 4: Сжатая тень (используется для создания тонких контуров или необычных эффектов) */
/* Без смещения (0 0), небольшое размытие 5px, ОТРИЦАТЕЛЬНОЕ растяжение -4px (уменьшает тень), цвет серый */
.example-4 {
/* Отрицательное растяжение делает тень меньше элемента ДО размытия */
box-shadow: 0 0 5px -4px #555555;
}
.example-4:hover {
/* Сделаем hover более заметным */
box-shadow: 0 0 10px -2px #555555;
transform: translateY(-3px);
}
/* Пример 5: Несколько слоев теней (для более сложных и реалистичных эффектов) */
/* Тени перечисляются через запятую. Порядок важен (первая указанная - самая верхняя) */
.example-5 {
background-color: #e0e5ec; /* Фон для неоморфизма */
box-shadow:
/* Тень 1: Темная, снизу-справа (создает глубину) */
5px 5px 10px rgba(163, 177, 198, 0.6),
/* Тень 2: Светлая, сверху-слева (создает блик, эффект объема) */ -5px -5px 10px
rgba(255, 255, 255, 0.5);
}
.example-5:hover {
box-shadow:
7px 7px 14px rgba(163, 177, 198, 0.7),
-7px -7px 14px rgba(255, 255, 255, 0.6);
transform: translateY(-3px); }Особенности использования inset для внутренних теней
Как мы упомянули, ключевое слово inset меняет тень, она начинает рисоваться внутри элемента. inset просто добавляется к остальным параметрам в начало или конец списка.
Например:
HTML:
<div class="box box-inset-1">Внутренняя </div>
<div class="box box-inset-2">Эффект вдавленности</div> CSS:
/* Пример 1: Простая внутренняя тень сверху-слева */
.box-inset-1 {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.4); /* Смещение от верхнего левого угла внутрь*/ }
/* Пример 2: Эффект вдавленной кнопки (две внутренние тени) */
.box-inset-2 {
background-color: #e0e0e0;
border: none;
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), /* Темная внутри */
inset -3px -3px 6px rgba(255, 255, 255, 0.7); /* Светлая внутри */
} Внутренние тени отлично подходят для создания эффекта глубины, нажатых кнопок, рамок внутри элемента или стилизации полей ввода.
Советы по оптимизации дизайна с тенями
Тени — это здорово, но ими легко злоупотребить. Вот несколько советов, как использовать box-shadow эффективно и со вкусом:
- Слишком темные, резкие или большие тени могут выглядеть неестественно и грязно. Часто легкая, едва заметная тень работает лучше всего.
- Старайтесь, чтобы тени на странице падали примерно в одном направлении (например, слегка вниз и вправо), как будто свет идет из одного источника. Это создает целостность.
- Тень должна быть видна на фоне. Слишком светлая тень на белом фоне потеряется, слишком темная тень может плохо смотреться на темном фоне. Подбирайте цвет и прозрачность.
- Анимировать box-shadow можно (например, при наведении мыши), но будьте осторожны. Это может замедлить браузер, особенно на слабых устройствах.
- Не злоупотребляйте растяжением (spread). Большое положительное растяжение часто выглядит неестественно. Отрицательное растяжение может быть полезно для создания тонких контуров.
Свойство box-shadow — это универсальный инструмент для добавления визуальной глубины и изящества веб-интерфейсам. Поняв его параметры и немного попрактиковавшись, вы сможете создавать самые разнообразные эффекты — от легкого выделения до сложных объемных элементов.