CSS Repeating Gradients

Wiederholende Farbverläufe nutzen einen Trick, den wir bereits durch den kreativen Einsatz von color-stops in den linear-gradient() und radial-gradient() Notationen beherrschen, und backen ihn für uns ein.

Die Idee ist, dass wir Muster aus den erstellten Farbverläufen generieren und diese unendlich wiederholen lassen können.

Es gibt einen Trick bei nicht wiederholenden Farbverläufen, um den Farbverlauf so zu erstellen, dass er, wenn er ein winzig kleines Rechteck wäre, mit anderen winzig kleinen rechteckigen Versionen von sich selbst zusammenpasst, um ein sich wiederholendes Muster zu erzeugen. Im Wesentlichen erstellt man diesen Farbverlauf und setzt die background-size, um dieses winzig kleine Rechteck zu definieren. Das machte es einfach, Streifen zu erzeugen, die man dann drehen oder anderweitig bearbeiten konnte.

Syntax

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

Die Syntax für jede Notation ist die gleiche wie für ihren zugehörigen Farbverlaufstyp. Zum Beispiel folgt repeating-linear-gradient() derselben Syntax wie linear-gradient().

Wiederholender Farbverlauf	Zugehörige 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 letzten Farbstopp bestimmt. Wenn dieser bei 20px liegt, ist die Größe des Farbverlaufs (der sich dann wiederholt) ein 20px mal 20px Quadrat. Dasselbe gilt, wenn mehrere Farben an das Muster gekettet sind. Die letzte Farbe mit dem letzten Stopp bestimmt die Größe und Position 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.

Dasselbe gilt für radiale Farbverläufe

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

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

Browser-Unterstützung

Wiederholende Farbverläufe erfreuen sich derzeit großer Browserunterstützung. Das gesagt, wir sprechen zum Zeitpunkt des Schreibens nur von linearen und radialen Farbverläufen, da konische Farbverläufe noch eine vorgeschlagene Funktion im Level 4 Arbeitsentwurf der Spezifikation sind. Hoffen wir auf eine breite Akzeptanz, sobald sie die Candidate Recommendation erreicht.

Additional Resources

• CSS Image Values and Replaced Content Module Level 3: Hier wurde das Konzept der wiederholenden Farbverläufe in die offizielle Spezifikation aufgenommen, aber nur für wiederholende lineare und radiale Farbverläufe.
• CSS Image Values and Replaced Content Module Level 4: Dies ist der aktuelle Arbeitsentwurf, in dem konische Farbverläufe für die Aufnahme in die offizielle Spezifikation in Betracht gezogen werden.
• CSS3 Patterns Gallery: Lea Verou hat eine Galerie mit raffinierten Farbverlaufsmustern zusammengestellt, darunter viele, die die Technik der wiederholenden Farbverläufe nutzen.