Repeating Gradients – sich wiederholende CSS-Verläufe
Mit Hilfe von CSS-Verläufen lassen sich erstaunliche Effekte erzeugen. Es ist beispielsweise möglich Oberflächen zu simulieren oder Plastizität zu erzeugen. Mit sich wiederholenden Verläufen (Repeating Gradients) stehen darüber hinaus noch deutlich komplexere Gestaltungsmöglichkeiten zur Verfügung. Es lassen sich u.a. komplexe Muster erzeugen.
Workshops und Seminare von kulturbanause
Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …
Linearer, sich wiederholender Verlauf
Der repeating-linear-gradient verläuft geradlinig von A nach B und kann über einen Winkel gedreht werden. Mit Hilfe von Farbunterbrechungen ist es möglich Muster zu erzeugen. Die Farbunterbrechung der letzten Farbe bestimmt wie schnell der Verlauf wiederholt werden soll.
background-image: repeating-linear-gradient(90deg, white 0, black 100px);
Flexibler Verlauf
Es ist auch möglich die Farbunterbrechungen in Prozent anzugeben.
background-image: repeating-linear-gradient(90deg, white 0%, black 25%);
Verlauf mit mehreren Farbunterbrechungen
Je mehr Farbunterbrechungen verwendet werden, desto komplexere Muster sind möglich. Achtet darauf, dass die Farbunterbrechungen entweder alle in Pixeln oder alle in Prozent angegeben werden müssen.
background-image: repeating-linear-gradient(90deg, white 10px, silver 20px, lightslategray 30px, grey 40px, black 50px, lightslategray 60px, silver 70px, white 80px);
Radialer, sich wiederholender Verlauf
Auch ein kreisförmiger Verlauf kann erstellt werden. Wie bei den linearen Verläufen sind mehrere Farbunterbrechungen sowie die Angabe der Farbunterbrechnung in Prozent möglich. Als Winkel wird circle angegeben um den Verlauf vom Mittelpunkt aus zu beginnen.
background-image: repeating-radial-gradient(circle, silver, black 50px);
Komplexe Muster mit sich wiederholenden CSS-Verläufen
Mit Hilfe der CSS-Eigenschaft background-size können Hintergrundbilder auf eine bestimmte Größe transformiert werden. Da ein Verlauf in CSS als Bild behandelt wird, lassen sich mit background-size interessante Effekte erzielen.
background-image: repeating-radial-gradient(circle, darkblue, blue, aqua, white 6px);
background-size: 50px 50px;
Browser-Support für Repeating Gradients
Der Browsersupport für Repeating Gradients ist ab dem IE10 gegeben. Eine detaillierte Zusammenfassung entnehmt ihr bitte der Website Can I Use. Aktuell rendert Chrome die Verläufe allerdings deutlich stufiger als Safari oder Firefox.
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Sebastian
Verfasst am 22. Juni 2014 um 12:49 Uhr.
Vielen Dank für die Informationen. Die Variante der Repeating-Gradienten kannte ich noch gar nicht.
Das blaue Beispiel erinnert mich an die CSS3 Patterns Gallery von Lea Verou (http://lea.verou.me/css3patterns/). Die kennst du aber bestimmt schon.
Auch allgemein möchte ich kurz sagen: Danke! Bin schon öfter auf interessante Artikel von dir gestoßen.
Liebe Grüße Sebastian
Jonas Hellwig
Verfasst am 23. Juni 2014 um 22:34 Uhr.
Hallo Sebastian, ja, die Pattern-Gallery kenne ich. Vom Grundprinzip funktioniert das da auch alles genau so, nur sind die Verläufe soweit ich weiß ganz normale Verläufe inkl.
background-size-Eigenschaft. Aber auch damit lassen sich natürlich sehr interessante Effekte erzeugen.Domä
Verfasst am 5. Juli 2014 um 22:31 Uhr.
Wow, das sieht ja hammer aus, kante ich noch gar nicht!
Habe CSS-Gradients eigentlich nur immer benutzt, um Schatten zu realisieren.
Wie siehts denn mit der Performance bei der Nutzung aus? schwere Einbußen?
LG
Jonas Hellwig
Verfasst am 7. Juli 2014 um 11:40 Uhr.
Mit ist nicht bekannt, dass die Performance in Mitleidenschaft gezogen würde, aber ich habe dazu auch keine detaillierte Berichte gelesen.