CSS herhalende verlopen - CSS-trucs

Het herhalen van hellingen nemen een truc kunnen we nu al doen met de creatieve gebruik van color-stopsop linear-gradient()en radial-gradient()notaties, en bakt het in voor ons.

Het idee is dat we patronen kunnen creëren uit de verlopen die we maken en deze oneindig kunnen herhalen.

Een lineair verloop (links) vergelijken met een herhalend lineair verloop (rechts).

Er is een truc, met niet-herhalende verlopen, om het verloop zo te maken dat als het een kleine kleine rechthoek was, deze zou worden uitgelijnd met andere kleine rechthoekige versies van zichzelf om een herhalend patroon te creëren. Dus maak in wezen dat verloop en stel het background-sizein om die kleine kleine rechthoek te maken. Dat maakte het makkelijk om strepen te maken, die je vervolgens kon draaien of wat dan ook.

Syntaxis

Er zijn drie soorten herhalende verlopen, waarvan er momenteel twee worden ondersteund in de officiële specificatie en een in het huidige werkontwerp.

De syntaxis voor elke notatie is hetzelfde als het gerelateerde verlooptype. Volg bijvoorbeeld repeating-linear-gradient()dezelfde syntaxis als linear-gradient().

Herhalend verloop	Gerelateerde notatie	Ondersteund?
`repeating-linear-gradient()`	`linear-gradient()`	Ja
`repeating-radial-gradient`	`radial-gradient()`	Ja
`repeating-conic-gradient`	`conic-gradient()`	Nee

Waar het verloop zich herhaalt, wordt bepaald door de uiteindelijke kleurstop . Als dat het geval is 20px, is de grootte van het verloop (dat zich dan herhaalt) een 20pxbij 20pxvierkant. Hetzelfde geldt als er meerdere kleuren aan het patroon zijn geketend. De uiteindelijke kleur met de laatste stop is wat de grootte en locatie van de herhaling bepaalt.

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

Zie de Pen lAkyo door Chris Coyier (@chriscoyier) op CodePen.

Hetzelfde met radiaal:

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

Zie de Pen Repeating Gradients door Chris Coyier (@chriscoyier) op CodePen.

Browser-ondersteuning

Herhalende verlopen genieten momenteel geweldige browserondersteuning. Dat gezegd hebbende, hebben we het op het moment van schrijven alleen over lineaire en radiale verlopen, omdat conische verlopen nog steeds een voorgestelde functie zijn in de werkversie van niveau 4 van de specificatie. Hier is te hopen dat we een brede acceptatie zien zodra het de aanbeveling van de kandidaat bereikt.

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.