CSS-Wiederholungsverläufe - CSS-Tricks

Das Wiederholen von Verläufen ist ein Trick, den wir bereits mit dem kreativen Einsatz von color-stopson linear-gradient()und radial-gradient()notations machen können, und backt ihn für uns ein.

Die Idee ist, dass wir Muster aus den von uns erstellten Verläufen erstellen und sie unendlich wiederholen lassen können.

Vergleich eines linearen Gradienten (links) mit einem sich wiederholenden linearen Gradienten (rechts).

Es gibt einen Trick mit sich nicht wiederholenden Verläufen, um den Verlauf so zu erstellen, dass er, wenn es sich um ein kleines Rechteck handelt, mit anderen kleinen kleinen Rechteckversionen von sich selbst ausgerichtet wird, um ein sich wiederholendes Muster zu erstellen. Erstellen Sie also im Wesentlichen diesen Farbverlauf und stellen Sie das ein background-size, um dieses kleine winzige Rechteck zu erstellen . Das machte es einfach, Streifen zu machen, die man dann drehen konnte oder was auch immer.

Syntax

Es gibt drei Arten von sich wiederholenden Verläufen, von denen zwei derzeit in der offiziellen Spezifikation und eine im aktuellen Arbeitsentwurf unterstützt werden.

Die Syntax für jede Notation entspricht der des zugehörigen Verlaufstyps. Beispielsweise repeating-linear-gradient()folgt die gleiche Syntax wie linear-gradient().

Gradienten wiederholen	Verwandte Notation	Unterstützt?
`repeating-linear-gradient()`	`linear-gradient()`	Ja
`repeating-radial-gradient`	`radial-gradient()`	Ja
`repeating-conic-gradient`	`conic-gradient()`	Nein

Wo sich der Farbverlauf wiederholt, wird durch den endgültigen Farbstopp bestimmt . Wenn das auf 20pxdie Größe des Gradienten (die dann wiederholt) ist ein 20pxdurch 20pxQuadrat. Das Gleiche gilt, wenn mehrere Farben an das Muster gekettet sind. Die endgültige Farbe mit dem Endanschlag bestimmt die Größe und den Ort der Wiederholung.

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

Siehe den Pen lAkyo von Chris Coyier (@chriscoyier) auf CodePen.

Gleiches gilt für Radial:

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

Sehen Sie sich die Stiftwiederholungsverläufe von Chris Coyier (@chriscoyier) auf CodePen an.

Browser-Unterstützung

Wiederholte Farbverläufe genießen derzeit eine hervorragende Browserunterstützung. Das heißt, wir sprechen zum Zeitpunkt dieses Schreibens nur über lineare und radiale Gradienten, da konische Gradienten immer noch ein vorgeschlagenes Merkmal im Arbeitsentwurf der Spezifikation der Stufe 4 sind. Wir hoffen, dass wir eine breite Akzeptanz sehen, sobald die Empfehlung des Kandidaten erreicht ist.

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.