CSS ismétlődő színátmenetek - CSS-trükkök

Az ismétlődő színátmenetek olyan trükköt követnek el, color-stopsamelyet a linear-gradient()és a radial-gradient()jelölések kreatív használatával már megtehetünk , és ezt nekünk sütjük.

Az ötlet az, hogy az általunk létrehozott színátmenetekből mintákat készíthetünk, és lehetővé tesszük számukra a végtelen ismétlést.

Lineáris gradiens (bal) és ismétlődő lineáris gradiens (jobb) összehasonlítása.

Van egy trükk, nem ismétlődő színátmenetekkel, hogy a színátmenetet úgy hozza létre, hogy ha egy kicsit apró téglalap lenne, akkor az más kis apró téglalap változatokkal állna sorba, hogy ismétlődő mintát hozzon létre. Tehát lényegében hozza létre ezt a színátmenetet, és állítsa be a background-sizekis apró téglalap létrehozására. Ez megkönnyítette a csíkok készítését, amelyeket aztán forgathatott, vagy bármi más.

Szintaxis

Három típusú ismétlődő színátmenet van, amelyek közül kettőt jelenleg támogat a hivatalos specifikáció, egyet pedig a jelenlegi munkadokumentum.

Az egyes jelölések szintaxisa megegyezik a kapcsolódó színátmenet típusával. Például repeating-linear-gradient()ugyanazt a szintaxist követi, mint a linear-gradient().

A színátmenet ismétlése	Kapcsolódó jelölés	Támogatott?
`repeating-linear-gradient()`	`linear-gradient()`	Igen
`repeating-radial-gradient`	`radial-gradient()`	Igen
`repeating-conic-gradient`	`conic-gradient()`	Nem

Ahol a színátmenet megismétlődik, azt a végső színleállás határozza meg . Ha ez a 20px, a méret a gradiens (amely ezután ismétli) egy 20pxa 20pxtéren. Ugyanez a helyzet akkor is, ha több szín van láncolva a mintához. A végső szín a végállással határozza meg az ismétlés méretét és helyét.

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

Lásd Chris Coyier (@chriscoyier) Pen lAkyo-ját a CodePen-en.

Ugyanez a sugárirányú:

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

Lásd Chris Coyier (@chriscoyier) toll ismétlődő színátmeneteit a CodePen-en.

Böngésző támogatás

Az ismétlődő színátmenetek jelenleg nagyszerű böngészőtámogatást élveznek. Ennek ellenére a lineáris és a sugárirányú gradiensekről csak az írás idején beszélünk, mert a kúpos gradiensek továbbra is javasolt jellemzők a specifikáció 4. szintű munkadokumentumában. Itt reménykedhetünk abban, hogy széles körű elfogadást tapasztalunk, amint eléri a jelölt ajánlását.

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.