Повторяющиеся градиенты: полосы и узоры

Полосатый прогресс-бар — классика интерфейсов. Рисовать каждую полосу отдельным стопом незачем: достаточно описать одну пару полос и попросить браузер повторять её до конца.

.progress__bar {
  height: 100%;
  background: repeating-linear-gradient(45deg, #339af0 0 10px, #74c0fc 0 20px);
}

Как работает повтор

У каждого вида градиента есть повторяющаяся версия с тем же синтаксисом:

• repeating-linear-gradient() — полосы;
• repeating-radial-gradient() — концентрические кольца;
• repeating-conic-gradient() — лучи, как у солнечных часов.

Браузер берёт отрезок от первой до последней позиции стопов и повторяет его, пока не заполнит блок (или полный оборот — у конического). В прогресс-баре этот отрезок — 20px: 10px тёмной полосы и 10px светлой.

Ловушка: забытый ноль

Длина повтора считается от первой позиции, а не от нуля. Пока первый стоп начинается с 0, это незаметно. Но стоит записать полосу в сокращённом виде, как в главе 1, — и узор поедет.

/* правильно: отрезок повтора 0–50%, три полосы по 1/6 */
.flag--ok {
  background: repeating-linear-gradient(#000 0 16.67%, #fcdc04 0 33.33%, #d90000 0 50%);
}

/* сломано: отрезок повтора 16.67–50%, полосы смещены */
.flag--broken {
  background: repeating-linear-gradient(#000 16.67%, #fcdc04 0 33.33%, #d90000 0 50%);
}

В обычном градиенте ноль у первого цвета можно опускать, в повторяющемся — нельзя. Если повторяющийся узор выглядит странно, первым делом стоит проверить именно это место.

Флаг Греции: полосы плюс крест

Девять полос, синий квадрат в углу и белый крест в нём. Полосы — это повторяющийся градиент с отрезком в 2/9 высоты. Крест — два слоя размером с квадрат, прижатые к левому верхнему углу.

.flag--greece {
  --blue: #0d5eaf;
  aspect-ratio: 3 / 2;
  background:
    linear-gradient(90deg, #0000 40%, #fff 0 60%, #0000 0) 0 0 / 37.037% 55.556% no-repeat,
    linear-gradient(var(--blue) 40%, #fff 0 60%, var(--blue) 0) 0 0 / 37.037% 55.556% no-repeat,
    repeating-linear-gradient(var(--blue) 0 calc(100% / 9), #fff 0 calc(200% / 9));
}

Квадрат занимает пять полос, то есть 5/9 высоты (55.556%). Чтобы он остался квадратом, его ширина должна быть той же длины: 5/9 высоты при флаге 3:2 — это 37,037% ширины. Внутри квадрата крест — полосы шириной в одну пятую, от 40% до 60%.

Синий цвет повторяется трижды, поэтому он вынесен в переменную. А в первом стопе повторяющегося слоя стоит тот самый ноль.

Флаг Уганды: два способа

Шесть полос — чёрная, жёлтая, красная и снова они же — плюс белый круг в центре. Эмблему с журавлём рисовать не будем: детальные изображения — работа для SVG, а не для градиентов.

.flag--uganda {
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(circle closest-side, #fff 33%, #0000 0),
    repeating-linear-gradient(#000 0 16.67%, #fcdc04 0 33.33%, #d90000 0 50%);
}

То же самое получается и без повторяющегося градиента. Обычный градиент из трёх полос делаем высотой в половину флага, а дальше работает плиточный повтор из прошлой главы:

.flag--uganda {
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(circle closest-side, #fff 33%, #0000 0),
    linear-gradient(#000 33.33%, #fcdc04 0 66.67%, #d90000 0) 0 0 / 100% 50%;
}

Результат на экране одинаковый. Какой вариант выбрать — дело вкуса: в CSS почти у любой картинки есть несколько верных решений.

Что запомнить

• repeating-*-градиенты повторяют отрезок от первой до последней позиции.
• В повторяющемся градиенте у первого цвета обязательно пишем начальную позицию, обычно 0.
• Тот же эффект часто даёт обычный градиент с background-size.