CSS korduvad gradientid CSS-trikid

Korduv kalded võtta trikk saame juba teha loominguline kasutamine color-stopson linear-gradient()ja radial-gradient()märked ja küpsetab ta meile.

Idee on selles, et saame enda loodud gradientidest luua mustreid ja lubada neil lõpmatult korrata.

Lineaarse gradiendi (vasakul) võrdlemine korduva lineaarse gradiendiga (paremal).

Mittekorduvate gradientidega on olemas nipp, et gradient luua nii, et kui see oleks väike pisike ristkülik, oleks see korduv mustri loomiseks rivis teiste väikeste väikeste ristkülikute versioonidega. Nii et sisuliselt looge see gradient ja määrake background-sizesee väike tilluke ristkülik. See muutis triipude valmistamise lihtsaks, mida siis sai pöörata või mida iganes.

Süntaks

Korduvaid gradiente on kolme tüüpi, neist kahte toetab praegu ametlik spetsifikatsioon ja ühte, mis on praeguses töökavandis.

Iga tähistuse süntaks on sama kui selle seotud gradienttüüp. Näiteks repeating-linear-gradient()järgib sama süntaksit nagu linear-gradient().

Korduv gradient	Seotud märge	Toetatud?
`repeating-linear-gradient()`	`linear-gradient()`	Jah
`repeating-radial-gradient`	`radial-gradient()`	Jah
`repeating-conic-gradient`	`conic-gradient()`	Ei

Kui gradient kordub, määratakse lõplik värvipeatus . Kui see on temperatuuril 20px, suurusest gradienti (mis siis kordab) on 20pxesitaja 20pxruut. Sama kehtib ka siis, kui mustri külge on aheldatud mitu värvi. Viimane värv koos viimase peatusega määrab korduse suuruse ja asukoha.

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

Vaadake Code Cenilt Chris Coyieri (@chriscoyier) pliiatsi Pen lAkyo.

Sama radiaaliga:

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

Vaadake CodePenil Chris Coyieri (@chriscoyier) pliiatsi korduvaid gradiente.

Brauseri tugi

Korduvates gradientides on praegu brauseri tugi suur. See tähendab, et selle kirjutamise ajal räägime ainult lineaarsetest ja radiaalsetest gradientidest, sest koonilised gradientid on endiselt spetsifikatsiooni 4. taseme tööprojekti kavandatud funktsioon. Siin on lootus, et näeme laialdast vastuvõtmist, kui see jõuab kandidaatide soovituseni.

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.