CSS-gentagelsesforløb - CSS-tricks

Gentagne gradienter tager et trick, som vi allerede kan gøre med den kreative brug af color-stopspå linear-gradient()og radial-gradient()notationerne, og bager det ind for os.

Ideen er, at vi kan skabe mønstre ud af de gradienter, vi opretter, og lade dem gentage uendeligt.

Sammenligning af en lineær gradient (venstre) med en gentagende lineær gradient (højre).

Der er et trick med ikke-gentagende forløb for at skabe gradienten på en sådan måde, at hvis det var et lille lille rektangel, ville det stille op med andre små bittesmå rektangelversioner af sig selv for at skabe et gentaget mønster. Så lav i det væsentlige den gradient og indstil den background-sizetil at lave det lille lille rektangel. Det gjorde det let at lave striber, som du derefter kunne rotere eller hvad som helst.

Syntaks

Der er tre typer gentagne gradienter, hvoraf to i øjeblikket understøttes i den officielle specifikation og en, der er i det nuværende arbejdsudkast.

Syntaksen for hver notation er den samme som dens relaterede gradienttype. For eksempel repeating-linear-gradient()følger den samme syntaks som linear-gradient().

Gentagende gradient	Relateret notation	Understøttet?
`repeating-linear-gradient()`	`linear-gradient()`	Ja
`repeating-radial-gradient`	`radial-gradient()`	Ja
`repeating-conic-gradient`	`conic-gradient()`	Ingen

Hvor gradienten gentages, bestemmes af det endelige farvestop . Hvis det er i 20px, er størrelsen på gradienten (som derefter gentages) en 20pxmed 20pxfirkant. Det samme gælder, hvis der er flere farver lænket til mønsteret. Den endelige farve med det sidste stop er det, der bestemmer størrelsen og placeringen af gentagelsen.

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

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

Samme med radial:

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

Se pennens gentagne forløb af Chris Coyier (@chriscoyier) på CodePen.

Browsersupport

Gentagne gradienter nyder i øjeblikket god browsersupport. Når det er sagt, taler vi kun om lineære og radiale gradienter på tidspunktet for denne skrivning, fordi koniske gradienter stadig er et foreslået træk i specifikationens niveau 4 arbejdsudkast. Her håber vi, at vi ser bred vedtagelse, når den når kandidatanbefaling.

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.