CSS gjentatte graderinger - CSS-triks

Gjentatte graderinger tar et triks vi allerede kan gjøre med den kreative bruken av color-stopspå linear-gradient()og radial-gradient()notasjonene, og baker det inn for oss.

Tanken er at vi kan lage mønstre ut av gradientene vi lager og la dem gjenta seg uendelig.

Sammenligning av en lineær gradient (venstre) med en repeterende lineær gradient (høyre).

Det er et triks, med ikke-gjentakende gradienter, for å lage gradienten på en slik måte at hvis det var et lite bittesmå rektangel, ville det stille opp med andre små bittesmå rektangelversjoner av seg selv for å skape et gjentakende mønster. Så egentlig lage den gradienten og sett den background-sizetil å lage det lille bittesmå rektangelet. Det gjorde det enkelt å lage striper, som du deretter kunne rotere eller hva som helst.

Syntaks

Det er tre typer gjentakende graderinger, hvorav to for øyeblikket støttes i den offisielle spesifikasjonen og en som er i gjeldende arbeidsutkast.

Syntaksen for hver notasjon er den samme som den relaterte gradienttypen. For eksempel repeating-linear-gradient()følger den samme syntaksen som linear-gradient().

Gjentatt gradient	Relatert notasjon	Støttet?
`repeating-linear-gradient()`	`linear-gradient()`	Ja
`repeating-radial-gradient`	`radial-gradient()`	Ja
`repeating-conic-gradient`	`conic-gradient()`	Nei

Hvor gradienten gjentas, bestemmes av det endelige fargestoppet . Hvis det er på 20px, er størrelsen på gradienten (som deretter gjentas) en 20pxmed 20pxfirkant. Det samme gjelder hvis det er flere farger lenket til mønsteret. Den endelige fargen med siste stopp er det som bestemmer størrelsen og plasseringen av repetisjonen.

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

Se Pen lAkyo av Chris Coyier (@chriscoyier) på CodePen.

Samme med radial:

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

Se Pen Repeating Gradients av Chris Coyier (@chriscoyier) på CodePen.

Nettleserstøtte

Gjentatte graderinger nyter for tiden god nettleserstøtte. Når det er sagt, snakker vi bare om lineære og radiale gradienter når dette skrives, fordi koniske gradienter fremdeles er et foreslått trekk i spesifikasjonens nivå 4-arbeidsutkast. Her håper vi at vi ser bred adopsjon når den når kandidatanbefaling.

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.