Фоны, рамки, тени и градиенты
Как из плоских прямоугольников сделать что-то приятное глазу: background целиком, скругления, мягкие тени, градиенты и почему outline — не border.
Что ты научишься делать
- Соберёшь мягкую тень, которая выглядит дорого, а не как в туториале 2010 года
- Сделаешь градиент и разберёшься, откуда считаются углы
- Отличишь outline от border и поймёшь, зачем это нужно
#background — это семь свойств в одном
background — сокращение. За ним стоят цвет, картинка, положение, размер, повтор и ещё пара настроек. Их можно задавать и по отдельности.
| Свойство | Что задаёт | Частые значения |
|---|---|---|
background-color | Цвет подложки | Любой цвет |
background-image | Картинку или градиент | url(…), linear-gradient(…) |
background-size | Размер картинки | cover, contain, 100% auto |
background-position | Куда её поставить | center, top right, 50% 20% |
background-repeat | Повторять ли | no-repeat, repeat-x |
background-attachment | Едет ли фон при прокрутке | scroll, fixed |
#Скругления
border-radius работает по той же логике, что и отступы, только считает углы: верхний левый, верхний правый, нижний правый, нижний левый.
.a { border-radius: 12px; } /* все четыре угла */.b { border-radius: 12px 0; } /* по диагонали */.c { border-radius: 20px 20px 0 0; } /* только сверху */.d { border-radius: 50%; } /* круг, если блок квадратный */.e { border-radius: 999px; } /* «таблетка» */#Тени
box-shadow принимает до пяти значений: сдвиг по X, сдвиг по Y, размытие, растяжение и цвет. Слово inset в начале превращает тень во внутреннюю.
box-shadow: 0 12px 28px -8px rgb(20 24 48 / 0.35);/* │ │ │ │ └ цвет с прозрачностью │ │ │ └ растяжение: минус ужимает тень │ │ └ размытие: чем больше, тем мягче │ └ сдвиг вниз └ сдвиг вбок */Так не надо
box-shadow: 2px 2px 5px #000;Чёрная, резкая, сдвинутая по диагонали. Так тени рисовали в нулевых: выглядит как грязь под элементом.
Так надо
box-shadow:
0 1px 2px rgb(20 24 48 / .06),
0 12px 28px -10px rgb(20 24 48 / .28);Свет падает сверху, поэтому сдвиг только по Y. Две тени: короткая прижимает элемент к поверхности, длинная даёт мягкий ореол.
#Градиенты
Градиент — это не цвет, а картинка, нарисованная браузером. Поэтому он задаётся в background-image, а не в background-color.
Линейный идёт по прямой. Угол считается необычно: 0deg — снизу вверх, 90deg — слева направо, 180deg — сверху вниз.
/* линейный: по диагонали */background: linear-gradient(135deg, #7c5cff, #b06cff);/* с точками остановки */background: linear-gradient(90deg, #7c5cff 0%, #b06cff 60%, #ff9db0 100%);/* радиальный: от центра */background: radial-gradient(circle at 30% 20%, #b06cff, transparent 60%);/* конический: по кругу — для диаграмм */background: conic-gradient(#7c5cff 0deg 120deg, #4bd1a0 120deg 200deg, #e5b567 200deg 360deg);#Несколько фонов сразу
У одного элемента может быть несколько фоновых слоёв: они перечисляются через запятую и укладываются друг на друга. Первый в списке лежит сверху, последний — ниже всех. Цвет фона всегда самый нижний слой, поэтому он пишется отдельно и только один раз.
Так делают сетку в клетку, полосатые подложки и мягкие пятна света под контентом — без единой картинки и без лишних div.
.board { background: /* верхний слой — сетка тонкими линиями */ repeating-linear-gradient(90deg, rgb(0 0 0 / .06) 0 1px, transparent 1px 40px), /* нижний — мягкая подсветка сверху */ radial-gradient(60% 50% at 50% 0%, #eef1ff, transparent 70%); background-color: #fafbff;}#Тень у текста
/* Читаемость белого текста на пёстрой картинке */.hero__title { color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / .55);}#outline — не border
| border | outline | |
|---|---|---|
| Занимает место | Да, увеличивает размер коробки | Нет, рисуется поверх |
| Можно по одной стороне | Да | Нет, всегда со всех |
| Следует скруглению | Да | Да, в современных браузерах |
| Есть отступ от края | Нет | Да, outline-offset |
| Основное применение | Оформление | Обводка фокуса |
Главное преимущество outline — он не двигает вёрстку. Поэтому именно им рисуют обводку фокуса: элемент не «прыгает» при переходе по Tab.
Где спотыкаются почти все
Чёрная резкая тень со сдвигом по диагонали
Почему Выглядит как грязь: в реальности свет падает сверху, а тень мягкая и полупрозрачная.
Как надо Сдвиг только по Y, большое размытие, прозрачность 0.1–0.3, цвет не чистый чёрный.
Градиент задан в background-color
Почему Градиент — это изображение, а не цвет. Свойство просто не примет такое значение.
Как надо Пиши background или background-image.
Картинка вылезает за скруглённые углы
Почему Скругление задано родителю, а картинка внутри — прямоугольная и рисуется поверх.
Как надо Добавь родителю overflow: hidden или скругли саму картинку.
outline: none убрана без замены
Почему Пропадает обводка фокуса — навигация с клавиатуры становится слепой. Мы это разбирали в десятом уроке.
Как надо Убрал стандартную — нарисуй свою через :focus-visible.
- Градиент gradient
- Плавный переход между цветами. Технически это изображение, а не цвет.
- Точка остановки color stop
- Место в градиенте, где цвет достигает заданного значения.
- Растяжение тени spread
- Четвёртое значение box-shadow: увеличивает или ужимает тень до размытия.
- Внутренняя тень inset shadow
- Тень, нарисованная внутри элемента. Создаёт эффект вдавленности.
- Обводка outline
- Линия поверх элемента, не занимающая места в раскладке.
Проверь себя
Именно поэтому обводку фокуса делают через <code>outline</code>: вёрстка не сдвигается.
Градиент — изображение, которое рисует браузер. Свойство цвета его не примет.
Отрицательное растяжение делает тень уже элемента — приём для аккуратных «поднятых» карточек.
<code>contain</code> вписывает картинку полностью, оставляя пустое место. <code>cover</code> заполняет блок и обрезает лишнее.
Неизвестное свойство просто игнорируется. Остальные правила продолжают работать — это и есть прогрессивное улучшение.
Задание
Три стеклянные карточки
Оформи карточки так, чтобы они выглядели как стекло на цветном фоне:
- контейнеру
.sceneзадай градиентный фон; - карточкам — полупрозрачный белый фон, светлую рамку и скругление не меньше 12px;
- добавь карточкам мягкую тень: сдвиг по Y, большое размытие, прозрачный цвет;
- текст в карточках должен читаться.
Подсказка 1
Градиент сцены: background: linear-gradient(135deg, #2a1a5e, #14173a);
Подсказка 2
Стекло — это полупрозрачный фон плюс светлая рамка: background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .22);
Подсказка 3
Мягкая тень: box-shadow: 0 14px 30px -16px rgb(0 0 0 / .6);
Показать решение
<div class="scene"> <article class="glass"> <h3>Эспрессо</h3> <p>Плотный и короткий</p> </article> <article class="glass"> <h3>Капучино</h3> <p>С густой пеной</p> </article> <article class="glass"> <h3>Раф</h3> <p>Сладкий и мягкий</p> </article></div>* { box-sizing: border-box; }.scene { display: flex; gap: 14px; flex-wrap: wrap; padding: 24px; background: linear-gradient(135deg, #2a1a5e, #14173a); border-radius: 18px;}.glass { flex: 1 1 140px; padding: 18px; color: #fff; background: rgb(255 255 255 / .12); backdrop-filter: blur(12px); border: 1px solid rgb(255 255 255 / .22); border-radius: 14px; box-shadow: 0 14px 30px -16px rgb(0 0 0 / .6);}.glass h3 { margin: 0 0 6px; font-size: 16px; }.glass p { margin: 0; font-size: 13px; opacity: .85; }