Повторяющиеся градиенты CSS - CSS-хитрости

Повторяющиеся градиенты взять трюк мы уже можем сделать с творческим использованием color-stopsна linear-gradient()и radial-gradient()нотации, и пекут его для нас.

Идея состоит в том, что мы можем создавать узоры из создаваемых нами градиентов и позволять им повторяться бесконечно.

Сравнение линейного градиента (слева) с повторяющимся линейным градиентом (справа).

Существует трюк с неповторяющимися градиентами, позволяющий создать градиент таким образом, чтобы, если бы это был маленький крошечный прямоугольник, он выровнялся бы с другими маленькими версиями крошечного прямоугольника самого себя, чтобы создать повторяющийся узор. Итак, по сути, создайте этот градиент и установите background-sizeэтот маленький крошечный прямоугольник. Это упростило создание полос, которые затем можно было вращать или что-то еще.

Синтаксис

Существует три типа повторяющихся градиентов, два из которых в настоящее время поддерживаются в официальной спецификации, а один - в текущем рабочем проекте.

Синтаксис для каждого обозначения такой же, как и связанный с ним тип градиента. Например, имеет repeating-linear-gradient()тот же синтаксис, что и linear-gradient().

Повторяющийся градиент	Связанные обозначения	Поддерживается?
`repeating-linear-gradient()`	`linear-gradient()`	да
`repeating-radial-gradient`	`radial-gradient()`	да
`repeating-conic-gradient`	`conic-gradient()`	Нет

Повторение градиента определяется конечной точкой цвета . Если это на 20pxразмер градиента (который затем повторяет) представляет собой 20pxпо 20pxплощади. То же самое верно, если к узору привязано несколько цветов. Последний цвет с конечной остановкой определяет размер и расположение повтора.

.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )

См. Pen lAkyo Криса Койера (@chriscoyier) на CodePen.

То же самое с радиальным:

.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )

См. Повторяющиеся градиенты пера Криса Койера (@chriscoyier) на CodePen.

Поддержка браузера

В настоящее время повторяющиеся градиенты отлично поддерживаются браузерами. Тем не менее, на момент написания этой статьи мы говорим только о линейных и радиальных градиентах, поскольку конические градиенты все еще являются предлагаемой функцией в рабочем проекте уровня 4 спецификации. Надеемся, что мы увидим широкое распространение, как только он достигнет рекомендации кандидата.

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.