@charak
terziffer

Muster aus CSS-Farbverläufen

Vor fünf Monaten habe ich das Aussehen meines Blogs überarbeitet. Statt eines großflächigen Hintergrundbilds verwende ich seitdem einen grünen Randstreifen mit kristallinem Muster (nur sichtbar, wenn das Browserfenster breit genug ist). Ich brauche dafür keine Bilddatei mehr, sondern erzeuge das Muster durch Code. Es besteht aus mehreren, übereinander gelegten Farbverläufen.

Ein Farbverlauf in CSS

Mit der Auszeichnungssprache CSS kann man die HTML-Elemente einer Website gestalten. Für einen einfachen Verlauf mit drei Farben sorgt der folgende Code:

background-image: linear-gradient(90deg, #fff 5%, #e32 30%, #ccc 80%);

Erklärung: Ein ausgewähltes Element bekommt als Hintergrundbild (background-image) einen linearen Farbverlauf (linear-gradient). Dieser soll aber nicht standardmäßig von unten nach oben laufen, sondern von links nach rechts, also um 90° verdreht (90deg).

Für die ersten 5% unseres Verlaufs wählen wir die Farbe Weiß (mit verkürzter Hexadezimalschreibweise ist das #fff 5%). Das Weiß geht dann über in Rot (bei 30% des Verlaufs: #e32 30%). Ab da verblasst das Rot zu Hellgrau, was bei 80% des Farbverlaufs erreicht ist (#ccc 80%). Diese letzte Farbe behält der Verlauf bis 100%, also bis ganz nach rechts:

Beispiel 1: Farbverlauf von links nach rechts, von Weiß über Rot bis zu Grau.

Musterhafte Wiederholung

Seit 2012/2013 unterstützen moderne Browser auch CSS-Farbverläufe, die sich wiederholen. Der folgende Verlauf umfasst nur etwa ein Viertel der Bildbreite und geht von violett über rosa nach grün. Danach beginnt er wieder bei violett und wiederholt sich über die gesamte Fläche.

Beispiel 2: Ein Farbverlauf von violett über rosa nach grün, der sich danach dreimal wiederholt

Für das CSS benötigen wir nun einen repeating-linear-gradient, einen sich wiederholenden linearen Verlauf. Den Winkel habe ich mit 100deg leicht schräg gewählt. Der Code:

background-image: repeating-linear-gradient(100deg, #839, #fdb 10%, #3a1 25%);

Farbbeginn ist violett (#839, ohne Prozentangabe), bei 10% liegt ein gelbliches Rosa (#fdb 10%) und bis 25% ändert sich das zu grün (#3a1 25%). Die letzte Angabe legt auch fest, wie breit der Verlauf insgesamt ist, bevor er sich wiederholt.

In diesem Beispiel ist zwischen grün und violett eine harte Kante; man sieht, wo der Verlauf neu anfängt. Würde man bei der ersten und letzten Angabe dieselbe Farbe festlegen, bekäme man zwischen den Wiederholungen einen weichen Übergang.

Farbe in Schichten

Der Trick meines grünen Randstreifens besteht darin, Teile des Farbverlaufs transparent zu lassen, dafür aber mehrere Verläufe mit unterschiedlichen Winkeln übereinander zu legen. Hier ein Beispiel mit drei Verläufen:

Beispiel 3: Drei Farbverläufe mit unterschiedlichen Winkeln, teilweise transparent

Der oberste Verlauf geht von transparent nach #deb (hellgrün) und ist 30% breit. Darunter liegt ein Farbverlauf von transparent nach #e32 (rot) und zurück nach transparent – dadurch entsteht keine harte Kante zwischen Ende und Anfang des Verlaufs.

Ganz zuunterst und zu einem großen Teil verdeckt ist der Farbverlauf aus Beispiel 2, hier mit den Farben #fff (weiß) und #839 (violett). Der gesamte Code, ergänzt um Winkel und Prozentangaben sieht so aus:

background-image:
repeating-linear-gradient(160deg, transparent, #deb 30%),
repeating-linear-gradient(40deg, transparent, #e32 20%, transparent 23%),
repeating-linear-gradient(100deg, #fff, #839 25%);

Kombiniere!

Nun haben wir alle Zutaten für den Randstreifen zusammen. Es kommt nur noch auf die richtige Zusammenstellung und Farbgebung an. Man nehme den Verlauf aus Beispiel eins, aber mit den Farben Weiß, Hellgrün und Grün. Darüber lege man die drei Verläufe aus Beispiel 3, aber in transparent-weiß statt farbig:

Beispiel 4: Über einem weiß-grünen Farbverlauf liegen drei transparente-weiße Verläufe, die sich wiederholen.

Der Code dazu ist folgender:

background-image:
repeating-linear-gradient(160deg, transparent, #fff 30%),
repeating-linear-gradient(40deg, transparent, #fff 20%, transparent 23%),
repeating-linear-gradient(100deg, transparent, #fff 25%),
linear-gradient(90deg, #fff 5%, #deb 30%, #3a1 80%);

Für meinen Blog habe ich die Maße und Winkel der Farbverläufe angepasst, das Weiß halbtransparent gemacht (mit der HSLA-Farbangabe hsla(0,0%,100%, 0.3) statt #fff) und die Abstände des weiß-grünen Hintergrunds teilweise fest und teilweise abhängig von der Fensterbreite gesetzt. Deshalb verschwindet der Randstreifen scheinbar, wenn das Browserfenster schmaler wird (tatsächlich sieht man die weißen Verläufe auf weißem Hintergrund nicht mehr).

Erst der Anfang

Das Mozilla Developer Network bietet einen ausführlichen, deutschsprachigen Artikel über CSS-Farbverläufe, auch über radiale Verläufe. Wie unterschiedlich CSS-Muster sein können, zeigt Lea Verou in ihrer CSS3-Muster-Galerie. Hier kann man selbst im Code herumprobieren, zum Beispiel bei den einfacheren diagonalen Streifen.

---
Rubrik(en):  #methodik 

Artikel kommentieren

Ich lege Wert auf eine respektvolle Diskussion und überprüfe jeden Kommentar, bevor er hier erscheint. Beleidigende oder unsachliche Beiträge ignoriere ich mit großem Vergnügen. Alle Angaben sind freiwillig.

 (Pseudonym möglich)
 (wird nicht veröffentlicht)

Formatierungen mit HTML sind möglich, z. B. <em>betont</em>, <strong>hervor­gehoben</strong> oder <code>Quelltext</code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung">).

← Ein gefalteter Stier

Mit Spenden werben →