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 от Chris Coyier (@chriscoyier) на CodePen.

Същото с радиално:

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

Вижте Pen Repeating Gradients от Chris Coyier (@chriscoyier) на CodePen.

Поддръжка на браузър

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

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.