Неожиданная сила box-shadow border: создаем множественные «рамки»
Свойство box-shadow — верный друг верстальщика. Мы привыкли использовать его для создания объемных кнопок, плавающих карточек и тонких эффектов глубины. Но что, если я скажу, что этот инструмент скрывает куда больше возможностей, чем кажется? За пределами привычных параметров смещения и размытия лежит четвертый, часто обделенный вниманием, параметр — spread radius. Именно он открывает дверь к нестандартным и изящным решениям, о которых многие даже не подозревают.
Ниже наглядно демонстрируется, как свойство spread-radius влияет на размер тени. Для настройки параметра и проверки результата используйте ползунки.
0 0 0 {{shadow1}}px #ba7423,
0 0 0 {{shadow2}}px #89460b;
Тупик одной границы: когда border уже недостаточно
Представьте задачу: дизайнер предоставил макет, где у кнопки или блока не одна, а две или даже три контурные линии разного цвета и толщины. Классическое свойство border здесь бессильно — оно позволяет задать лишь одну сплошную границу. Можно, конечно, изворачиваться с помощью вложенных элементов или псевдоэлементов (::before, ::after), но это усложняет HTML-структуру и добавляет лишний код. Неужели нет простого и элегантного CSS-способа?
Спрятанный ключ: четвертый параметр наносит ответный удар
Оказывается, решение было у нас под носом все это время. Секрет кроется в четвертом, необязательном параметре свойства box-shadow — радиусе распространения (spread radius). В то время как первые три параметра отвечают за смещение тени по осям, ее размытие и цвет, spread radius буквально «растягивает» или «сжимает» саму тень от границ элемента.
Вот как выглядит синтаксис с ним:
box-shadow: [смещение по X] [смещение по Y] [размытие] [распространение] [цвет];Ключевой момент: если установить смещение и размытие в 0, а spread radius задать положительным, мы получим не тень, а точную, сплошную линию, повторяющую контур элемента. Это и есть наша «псевдорамка». А главное преимущество box-shadow — возможность перечисления нескольких таких теней через запятую!
Как это работает? Разбираем магию детально
Давайте разберем наглядный пример, который вы видели в начале:
.box {
background-color: #f3ba30;
box-shadow: 0 0 0 20px #ba7423, 0 0 0 40px #89460b;
}Что здесь происходит?
- Первая «тень»:
0 0 0 20px #ba7423. С нулевым смещением и размытием, но с распространением в20px. Она создает сплошную оранжевую рамку толщиной20pxвокруг желтого блока. - Вторая «тень»:
0 0 0 40px #89460b. Она добавляется через запятую. Важное правило: тени накладываются в порядке записи, первая — сверху. Поэтому, чтобы вторая рамка была снаружи от первой, ее радиус распространения должен быть равен желаемой толщине плюс толщина всех предыдущих рамок. В нашем случае:20px(первая рамка) +20px(желаемая толщина второй) =40px.
Таким образом, мы получаем элемент с двумя самостоятельными контурами, используя всего одно CSS-свойство! При желании последней в списке можно добавить и классическую размытую тень для объема, создав сложный, многослойный эффект.
Заключение
Четвертый параметр spread radius превращает box-shadow из инструмента для создания теней в мощное средство для рисования сложных контуров. Это гениально простое решение для множественных рамок, которое не требует лишней разметки, остается гибким и легко редактируемым. Поэкспериментируйте с ним, комбинируя цвета и толщины — вы откроете для себя новый пласт возможностей в дизайне интерфейсов.
Мечтаете о современном сайте с продуманным интерфейсом и стильными деталями, подобными этим? Наша веб-студия воплощает сложные дизайн-идеи в чистый, эффективный и красивый код. От лаконичного лендинга до многофункционального приложения — мы создадим цифровой продукт, который будет не только работать безупречно, но и радовать ваших пользователей. Давайте обсудим ваш проект и сделаем первый шаг к его впечатляющей реализации!