← назад к разделу

Раскладку освоили — остался декоративный слой: то, что делает интерфейс «дорогим». Хорошая новость: почти вся современная декоративность — градиенты, стекло, ховер-эффекты — рисуется чистым CSS, без картинок и JavaScript. Пройдём по инструментам.

Градиенты: изображения из ниоткуда

Градиент — это генерируемое изображение: живёт в background-image, а не в background-color.

.hero  { background: linear-gradient(135deg, #2f5b4f, #8fd3c4); }
.badge { background: radial-gradient(circle at top left, #ffd54d, #ff8a3d); }
.ring  { background: conic-gradient(from 0deg, #2f5b4f 0 75%, #e5e5e5 0); } /* диаграмма-кольцо */

Направление — углом или ключевыми словами (to right); стопы цветов можно расставлять процентами. Два стопа в одной точке дают резкую границу вместо перехода — так градиентами рисуют полосы, шевроны и прогресс-бары. Фонов может быть несколько (через запятую, верхний — первый): полупрозрачный градиент поверх фотографии — стандартное затемнение под текст:

.card {
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.15)),
    url(photo.jpg) center / cover no-repeat;
}

Шорткат center / cover no-repeat — это background-position / background-size и повтор: cover заполняет блок с обрезкой, contain вписывает целиком.

Картинки в рамке: object-fit

То, что background-size делает для фонов, object-fit делает для контентных <img> и <video>:

.avatar img {
  width: 64px;
  height: 64px;
  object-fit: cover;   /* заполнить, обрезав лишнее, без искажения */
  border-radius: 50%;
}

Без него картинка в жёстких размерах сплющивается. cover — обрезать, contain — вписать с полями, object-position — какую часть сохранить при обрезке. Аватарки, карточки товаров, превью видео — везде object-fit: cover.

Фильтры: фотошоп на лету

filter обрабатывает сам элемент со всем содержимым: blur(), brightness(), contrast(), grayscale(), saturate(), sepia(), hue-rotate(), invert(), drop-shadow(). Комбинируются через пробел:

.logo-wall img { filter: grayscale(1) opacity(.7); }
.logo-wall img:hover { filter: none; }             /* классика: серые логотипы, цвет по наведению */
.sticker { filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }

drop-shadow против box-shadow: box-shadow рисует тень по прямоугольнику коробки, drop-shadow — по фактическому контуру содержимого, включая прозрачность PNG и SVG. Для иконок и стикеров — только drop-shadow.

backdrop-filter обрабатывает не элемент, а то, что под ним, — эффект матового стекла из современных интерфейсов:

.glass-header {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(12px);
}

Оба фильтра недёшевы для отрисовки — на больших областях и в длинных списках применять осмотрительно.

Трансформации: двигаем без последствий

transform смещает, вращает и масштабирует элемент визуально, не трогая раскладку — соседи не двигаются, место сохраняется:

.card:hover { transform: translateY(-4px) scale(1.02); }
.chevron.open { transform: rotate(180deg); }

Функции: translate(x, y) (проценты — от самого элемента), rotate(deg), scale(), skew(); порядок в списке значим — применяются справа налево. Точку опоры задаёт transform-origin: стрелка, вращающаяся вокруг основания, — это transform-origin: bottom center. Есть и 3D-семейство (rotateY, perspective) — эффекты переворота карточек.

Два системных следствия transform, которые уже встречались в цикле: он создаёт контекст наложения и ломает position: fixed у потомков. И третье, приятное: transform и opacity — самые дешёвые свойства для анимации, браузер выполняет их на композиторе без пересборки раскладки.

Анимации: transition и @keyframes

Каркас анимирования двумя инструментами:

transition — плавный переход между двумя состояниями (было → стало по ховеру/классу):

.card { transition: transform .2s ease, box-shadow .2s ease; }

@keyframes — сценарий с любым числом шагов, живущий своей жизнью:

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.live-dot { animation: pulse 1.2s ease-in-out infinite; }

Шорткат animation собирает имя, длительность, тайминг-функцию, задержку, число повторов (infinite), направление (alternate — туда-обратно) и fill-mode (forwards — остаться в конечном кадре). Правило выбора: два состояния — transition, сценарий или бесконечный цикл — keyframes. Производительность, кадровый бюджет и prefers-reduced-motion — в отдельной статье про анимации.

Коротко

  • Градиент — генерируемое изображение в background-image; два стопа в одной точке — резкая граница; градиент поверх фото — затемнение под текст.
  • Для контентных картинок в жёстких размерах — object-fit: cover, иначе сплющит.
  • filter обрабатывает элемент, backdrop-filter — фон под ним («стекло»); drop-shadow повторяет контур, box-shadow — прямоугольник.
  • transform двигает визуально, не трогая раскладку; точка опоры — transform-origin; побочно создаёт контекст наложения и ломает fixed у потомков.
  • Два состояния — transition; сценарий/цикл — @keyframes + animation. Анимировать в первую очередь transform и opacity.

Что почитать дальше

  • Анимации: CSS и оптимизации — производительность, паттерны и доступность движения.
  • Позиционирование — контексты наложения, которые создаёт transform.
  • Каскад и специфичность — начало цикла, если пришли сюда с конца.