Florence Maurice

Webthemen

CSS3: Sich wiederholende Farbverläufe

Geschrieben am: , aktualisiert:

Neben den klassischen Farbverläufen gibt es auch die wiederholenden Farbverläufe.

Mit linear-gradient() und radial-gradient() erzeugt man einfache Farbverläufe . Über die Funktionen repeating-linear-gradient() kann man hingegen wiederholende lineare Farbverläufe und mit repeating-radial-gradient() wiederholende radiale Farbverläufe definieren.

Die sich wiederholenden Farbverläufe funktionieren im Prinzip genauso wie die normalen Farbverläufe. Im Unterschied dazu werden aber die Colorstops immer wiederholt, indem als neue Positionen für die wiederholten Farbverläufe ein Vielfaches der Differenz zwischen der letzten und der ersten Farbposition genommen wird.

Das Entscheidende: Man muss Colorstops mit anderen Werten als 0% und 100% definieren, damit es etwas gibt, das wiederholt werden kann. In folgendem Beispiel gibt es einen sich wiederholenden radialen und einen sich wiederholenden linearen Farbverlauf.

div:nth-child(1){ 
background: repeating-radial-gradient(circle, #ADDDD2 10px, #040707 15px);
}
div:nth-child(2) {
background: repeating-linear-gradient(#ADDDD2 10px, #040707 15px);
}

Entscheidend ist die Differenz zwischen Colorstops, wie die folgenden Beispiele demonstrieren. Im ersten Beispiel ist die Differenz 50%, es kommt also nur zu zwei Wiederholungen:

div:nth-child(3) {
background: repeating-linear-gradient(#ADDDD2 0%, #040707 50%);
}

Beim nächsten Beispiel ist die Differenz 25%, damit sind vier Wiederholungen möglich:

div:nth-child(4) { 
background: repeating-linear-gradient(#ADDDD2 25%, #040707 50%);
}

Farbverläufe: zwei Wiederholungen und vier Wiederholungen

Das Beispiel gibt es auch zum Ausprobieren bei jsFiddle.