CSS pasikartojantys gradientai CSS-gudrybės

Kartojimas gradientai imtis pokštą jau galime daryti su kūrybine naudojimo color-stopsant linear-gradient()ir radial-gradient()ženklais, ir kepa ją mums.

Idėja yra ta, kad mes galime sukurti modelius iš savo sukurtų gradientų ir leisti jiems kartotis be galo.

Linijinio gradiento (kairėje) palyginimas su pasikartojančiu tiesiniu gradientu (dešinėje).

Yra triukas su nesikartojančiais nuolydžiais sukurti gradientą taip, kad jei tai būtų mažas mažytis stačiakampis, jis sutaptų su kitomis mažomis mažomis mažomis stačiakampių versijomis, kad sukurtų pasikartojantį modelį. Taigi iš esmės sukurkite tą gradientą ir nustatykite background-sizetą mažą mažą stačiakampį. Dėl to buvo lengva padaryti juostas, kurias tada galėtumėte pasukti ar bet ką.

Sintaksė

Yra trijų tipų pasikartojantys nuolydžiai, du iš jų šiuo metu palaikomi oficialioje specifikacijoje, o vienas - dabartiniame darbiniame projekte.

Kiekvieno užrašo sintaksė yra tokia pati, kaip ir su ja susijusio gradiento rūšis. Pavyzdžiui, repeating-linear-gradient()vadovaujasi ta pačia sintakse kaip linear-gradient().

Pasikartojantis gradientas	Susijęs žymėjimas	Palaikoma?
`repeating-linear-gradient()`	`linear-gradient()`	Taip
`repeating-radial-gradient`	`radial-gradient()`	Taip
`repeating-conic-gradient`	`conic-gradient()`	Ne

Kur gradientas kartojasi, nustatomas galutinis spalvų sustojimas . Jei tai ne 20px, iš gradiento dydis (kuris tada kartoja) yra 20pxiki 20pxkvadrato. Tas pats pasakytina, jei prie modelio yra susietos kelios spalvos. Galutinė spalva su paskutiniu sustojimu lemia pakartojimo dydį ir vietą.

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

Žiūrėkite Chriso Coyier (@chriscoyier) „Pen lAkyo“ svetainėje „CodePen“.

Tas pats su radialiniu:

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

Žr. Chriso Coyier'io (@chriscoyier) „Pen Pen“ besikartojančius gradientus „CodePen“.

Naršyklės palaikymas

Šiuo metu besikartojantys nuolydžiai palaiko puikų naršyklės palaikymą. Tai pasakius, apie tiesinius ir radialinius nuolydžius kalbame tik šio rašymo metu, nes kūginiai nuolydžiai vis dar yra siūloma 4 lygio darbo specifikacijos projekto ypatybė. Tikimės, kad sulauksime kandidatų rekomendacijų, kai jas pasieksime plačiai.

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.