Ponavljajoči se prelivi CSS - CSS-triki

Ponavljanje vzponi si trik, da lahko že opraviti z ustvarjalno uporabo color-stopsna linear-gradient()in radial-gradient()oznak, in jo peče v nas.

Ideja je, da lahko iz gradientov, ki jih ustvarimo, ustvarimo vzorce in jim omogočimo neskončno ponavljanje.

Primerjava linearnega gradienta (levo) s ponavljajočim linearnim gradientom (desno).

Obstaja trik z ne ponavljajočimi se prelivi, da ustvarimo preliv tako, da bi se, če bi bil majhen majhen pravokotnik, uvrstil v druge majhne različice majhnega pravokotnika, da bi ustvaril ponavljajoč se vzorec. Torej v bistvu ustvarite ta gradient in nastavite, background-sizeda naredi ta majhen majhen pravokotnik. Tako je bilo enostavno narediti proge, ki jih lahko nato zasukate ali kar koli drugega.

Sintaksa

Obstajajo tri vrste ponavljajočih se prelivov, od katerih sta dva trenutno podprta v uradni specifikaciji in ena, ki je v trenutnem delovnem osnutku.

Sintaksa za vsak zapis je enaka kot z njim povezan tip gradienta. repeating-linear-gradient()Sledi na primer enaka sintaksa kot linear-gradient().

Ponavljajoči se gradient	Povezani zapis	Podprta?
`repeating-linear-gradient()`	`linear-gradient()`	Da
`repeating-radial-gradient`	`radial-gradient()`	Da
`repeating-conic-gradient`	`conic-gradient()`	Ne

Kjer se gradient ponovi, se določi s končno stopnjo barve . Če je to 20px, je velikost gradienta (ki se nato ponovi) kvadrat 20pxza 20pxkvadrat. Enako velja, če je na vzorec priklenjenih več barv. Končna barva s končnim postankom je tista, ki določa velikost in lokacijo ponovitve.

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

Oglejte si Pen lAkyo Chrisa Coyierja (@chriscoyier) na CodePen.

Enako kot pri radialnih:

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

Glejte Pen Repeating Gradients avtorja Chrisa Coyierja (@chriscoyier) na CodePen.

Podpora za brskalnik

Ponavljajoči se gradienti trenutno uživajo odlično podporo brskalnika. Kljub temu v času pisanja tega članka govorimo le o linearnih in radialnih gradientih, ker so stožčasti gradienti še vedno predlagana značilnost v delovnem osnutku specifikacije na ravni 4. Upamo, da bomo sprejeli široko sprejetje, ko bo doseglo priporočilo kandidata.

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.