CSS ponavljajući gradijenti - CSS-trikovi

Ponavljanje gradijenti uzeti štih već možemo napraviti sa kreativno korištenje color-stopsas linear-gradient()i radial-gradient()zapisima i peče ga za nas.

Ideja je da možemo stvoriti uzorke od gradijenata koje stvaramo i omogućiti im beskonačno ponavljanje.

Usporedba linearnog gradijenta (lijevo) s ponavljajućim linearnim gradijentom (desno).

Postoji trik, s ne ponavljajućim gradijentima, kako bi se gradijent stvorio na takav način da bi se, ako je to mali sićušni pravokutnik, poravnao s drugim malim sićušnim verzijama pravokutnika kako bi stvorio ponavljajući uzorak. Dakle u osnovi stvorite taj gradijent i postavite background-sizeda napravi taj mali maleni pravokutnik. To je olakšalo izradu pruga, koje biste potom mogli rotirati ili što već.

Sintaksa

Postoje tri vrste ponavljajućih gradijenata, od kojih su dvije trenutno podržane u službenoj specifikaciji, a jedna koja je u trenutnom radnom nacrtu.

Sintaksa za svaku notaciju jednaka je povezanoj vrsti gradijenta. Na primjer, repeating-linear-gradient()slijedi istu sintaksu kao linear-gradient().

Ponavljajući gradijent	Povezana notacija	Podržani?
`repeating-linear-gradient()`	`linear-gradient()`	Da
`repeating-radial-gradient`	`radial-gradient()`	Da
`repeating-conic-gradient`	`conic-gradient()`	Ne

Gdje se gradijent ponavlja određuje konačna zaustavljanja boje . Ako je to na 20px, veličina gradijenta (koji je tada ponavlja) je 20pxpo 20pxtrg. Isto vrijedi i ako postoji više boja okovanih uzorkom. Konačna boja s krajnjim zaustavljanjem određuje veličinu i mjesto ponavljanja.

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

Pogledajte Pen lAkyo Chrisa Coyiera (@chriscoyier) na CodePenu.

Isto s radijalnim:

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

Pogledajte Pen Pen Repeating Gradients Chrisa Coyiera (@chriscoyier) na CodePenu.

Podrška preglednika

Ponavljajući gradijenti trenutno uživaju izvrsnu podršku preglednika. Međutim, u vrijeme pisanja ovog članka govorimo samo o linearnim i radijalnim gradijentima, jer su stožasti gradijenti još uvijek predložena značajka u radnom nacrtu specifikacije razine 4. Nadajmo se da ćemo vidjeti široko usvajanje kad stigne do preporuke kandidata.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.