Herhalend lineair verloop in CSS: strepen, ringen en patronen

Een herhalend lineair verloop in CSS herhaalt een korte reeks kleurstops langs een lijn tot het element gevuld is. Schrijf repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px) en je krijgt diagonale roze strepen van elk 14 pixels breed, zonder afbeeldingsbestand. De lengte van één herhaling wordt bepaald door de laatste stop, hier 28px. Gebruik hetzelfde idee met repeating-radial-gradient() voor ringen en repeating-conic-gradient() voor stralen.

Hoe repeating-linear-gradient() werkt

De syntaxis is gelijk aan een gewoon lineair verloop. Het verschil is wat er na de laatste stop gebeurt: in plaats van de laatste kleur aan te houden begint de browser het patroon opnieuw. Twee regels doen het meeste werk.

• De positie van de laatste stop is de tegellengte. Stops op 0, 14px en 28px herhalen elke 28 pixels.
• Twee kleuren op dezelfde positie maken een harde rand. #f472b6 0 14px, #fdf2f8 14px 28px springt bij 14px van roze naar lichtroze zonder menging.
• Elke stop kan twee posities hebben. #f472b6 0 14px betekent effen roze van 0 tot 14px, wat korter is dan de kleur twee keer schrijven.
• Gebruik lengtes, geen percentages, voor strepen. Percentages zijn relatief aan de verloopslijn, dus strepen rekken uit als het element van grootte verandert.

/* Soft repeat: colours blend within each 40px band */
.soft { background-image: repeating-linear-gradient(90deg, #ede9fe 0px, #c4b5fd 20px, #ede9fe 40px); }

/* Hard stripes: two colours share each boundary */
.stripes { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Uneven stripes: wide band, thin band */
.ticket { background-image: repeating-linear-gradient(90deg, #0f766e 0 36px, #f0fdfa 36px 40px); }

Streeppatronen om te kopiëren

Gelinieerd papier is een goed voorbeeld van een asymmetrische herhaling: 22 pixels papier, één pixel lijn. Hetzelfde patroon met een rode kantlijn erbovenop geeft een overtuigend schrift. Meer patroonideeën, waaronder rasters en stippen, staan in CSS-patronen.

Herhalende verlopen of background-size

Je kunt strepen ook maken met een gewoon linear-gradient() en background-size, wat een klein beeld van het verloop tegelt. Beide werken. Ze gedragen zich anders onder hoeken.

Reik voor alles wat diagonaal is eerst naar de herhalende versie. Voor dambordpatronen en rasters, waar je twee richtingen tegelijk nodig hebt, is background-size met gelaagde verlopen eenvoudiger.

.checker {
  background-image: repeating-conic-gradient(#e7e5e4 0 25%, #fafaf9 0 50%);
  background-size: 24px 24px;
}

.grid {
  background-color: #0f172a;
  background-image:
    linear-gradient(#1e293b 1px, transparent 1px),
    linear-gradient(90deg, #1e293b 1px, transparent 1px);
  background-size: 32px 32px;
}

De tweede kleur van het dambord begint op positie 0. Een stop kan nooit vóór de vorige liggen, dus de browser schuift hem op naar waar de laatste kleur eindigde, wat een harde rand maakt zonder het getal te herhalen. Het is een handige afkorting in elk verloop, herhalend of niet.

Ringen met repeating-radial-gradient()

De radiale versie herhaalt naar buiten vanuit een middelpunt, dus strepen worden ringen. Verplaats het middelpunt met at om rimpelingen vanuit een hoek te maken. Net als bij radiale verlopen houdt circle ringen rond; de standaard ellips rekt ze uit naar de box.

Stralen met repeating-conic-gradient()

Conische verlopen vegen rond een punt, dus hun stops zijn hoeken. Kies een herhaling die netjes in 360 past, zoals 20, 30 of 45 graden, anders is de laatste straal anders breed dan de rest. Houd de twee kleuren dicht bij elkaar in waarde voor een achtergrond; stralen met hoog contrast trillen op het scherm en trekken de aandacht van al het andere. De volledige syntaxis staat in conische CSS-verlopen.

Getande strepenranden herstellen

Harde randen onder een hoek kunnen getrapt ogen, en bij sommige zoomniveaus renderen browsers ze ongelijk, waardoor een paar strepen dikker lijken dan andere. De oplossing is elke rand een piepkleine overgang te geven in plaats van een perfecte sprong.

/* Jagged: a perfect hard edge */
.hard { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Smoother: one pixel of blend at each edge */
.smooth {
  background-image: repeating-linear-gradient(
    45deg,
    #f472b6 0 13.5px,
    #fdf2f8 14.5px 27.5px,
    #f472b6 28.5px
  );
}

Een geanimeerde kapperspaal-voortgangsbalk

background-position met precies één herhaling verschuiven laat strepen zonder sprong reizen. Voor een patroon van 45 graden met een herhaling van 28px is de afstand langs de horizontale as de herhaling gedeeld door de sinus van de hoek, ongeveer 39,6px.

.progress {
  background-image: repeating-linear-gradient(45deg, #6d28d9 0 14px, #8b5cf6 14px 28px);
  /* one horizontal repeat wider than the bar, so it can slide */
  background-size: calc(100% + 39.6px) 100%;
  background-repeat: no-repeat;
  animation: stripes 1s linear infinite;
}

@keyframes stripes {
  from { background-position: 0 0; }
  to { background-position: -39.6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { animation: none; }
}

Voor grotere geanimeerde achtergronden, zie geanimeerde CSS-verlopen, dat goedkopere technieken behandelt. Strepen en ringen zijn geweldig voor details, kaartjes en laadstaten. Voor een achtergrond die mensen als de jouwe herkennen, voegen de Marks van Gradiently materiaal, licht en korrel toe die een herhalend patroon niet kan, en ze renderen op elk formaat waarin je ontwerpt.