CSS upprepade övertoningar - CSS-tricks

Upprepande lutningar tar ett trick som vi redan kan göra med den kreativa användningen av color-stopspå linear-gradient()och radial-gradient()notationer, och bakar in det för oss.

Tanken är att vi kan skapa mönster ur lutningarna vi skapar och låta dem upprepa oändligt.

Jämföra en linjär gradient (vänster) med en repeterande linjär gradient (höger).

Det finns ett knep, med icke-upprepande lutningar, att skapa lutningen på ett sådant sätt att om det var en liten liten rektangel, skulle den rada upp med andra små lilla rektangelversioner av sig själv för att skapa ett upprepande mönster. Så i huvudsak skapa den lutningen och ställ in för background-sizeatt göra den lilla lilla rektangeln. Det gjorde det enkelt att göra ränder som du sedan kunde rotera eller vad som helst.

Syntax

Det finns tre typer av upprepade lutningar, varav två för närvarande stöds i den officiella specifikationen och en som finns i det nuvarande arbetsutkastet.

Syntaxen för varje notation är densamma som dess relaterade gradienttyp. Till exempel repeating-linear-gradient()följer samma syntax som linear-gradient().

Upprepande lutning	Relaterad notation	Stöds?
`repeating-linear-gradient()`	`linear-gradient()`	Ja
`repeating-radial-gradient`	`radial-gradient()`	Ja
`repeating-conic-gradient`	`conic-gradient()`	Nej

Där lutningen upprepas bestäms av det slutliga färgstoppet . Om det är på 20pxär lutningens storlek (som sedan upprepas) a 20pxmed 20pxkvadrat. Detsamma gäller om det finns flera färger kedjade i mönstret. Den slutliga färgen med det sista stoppet är det som avgör storleken och platsen för upprepningen.

.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.

Samma med radiell:

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

Se pennan upprepande övertoningar av Chris Coyier (@chriscoyier) på CodePen.

Webbläsarstöd

Upprepade lutningar har för närvarande bra webbläsarsupport. Med det sagt talar vi bara om linjära och radiella gradienter vid skrivningstidpunkten eftersom koniska gradienter fortfarande är en föreslagen funktion i arbetsutkastet på nivå 4 i specifikationen. Här hoppas vi att vi ser bred adoption när den når kandidatrekommendationen.

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.