CSS3: Sich wiederholende Farbverläufe

sich wiederholende Farbverläufe - radial und linear

Neben den klassischen Farbverläufen mit linear-gradient() und radial-gradient() gibt es auch mit CSS3 die etwas weniger häufig eingesetzten sich wiederholende Farbverläufe. Dafür existieren die Funktionen repeating-linear-gradient() für wiederholende lineare Farbverläufe und repeating-radial-gradient() für sich wiederholende radiale Farbverläufe.

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: -webkit-repeating-radial-gradient(circle , #ADDDD2 10px, #040707 15px);
background: repeating-radial-gradient(circle, #ADDDD2 10px, #040707 15px);
}
div:nth-child(2) {
background: -webkit-repeating-linear-gradient(#ADDDD2 10px, #040707 15px);
background: repeating-linear-gradient(#ADDDD2 10px, #040707 15px);
}

Angegeben wurde sowohl die Webkit-Variante als auch die Standard-Variante, ältere Webkit-Browser sind nicht berücksichtigt – aber in der alten Webkit-Syntax waren sich wiederholende Farbverläufe sowieso noch nicht vorgesehen.

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: -webkit-repeating-linear-gradient(#ADDDD2 0%, #040707 50%);
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: -webkit-repeating-linear-gradient(#ADDDD2 25%, #040707 50%);
background: repeating-linear-gradient(#ADDDD2 25%, #040707 50%);
}

Farbverläufe: zwei Wiederholungen und vier Wiederholungen

Das Beispiel gibt es auch zum Ausprobieren bei jsFiddle. Es funktioniert in Firefox, Chrome, Safari, Opera und Internet Explorer ab Version 10. Für ältere Browser sollte man noch eine Fallback-Farbe vor der Angabe des Farbverlaufs schreiben:

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

Möchte man ältere Webkit-Browser noch mit ins Boot holen, muss man diese für sie eigene Syntax schreiben und anstelle von sich wiederholende Farbverläufe auf einfache Farbverläufe setzen und die Wiederholung über die Eigenschaft background-size umsetzen.

Kommentare sind geschlossen.