@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. Ein einfacher Farbverlauf mit drei Farben ist zum Beispiel dieser:

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

Dafür sorgt der folgende Code:

Erklärung: Ein ausgewähltes Element (.beispiel-1) 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 Lila (bei 30% des Verlaufs: #839 30%). Ab da verblasst das Lila zu Grau, was bei 80% des Farbverlaufs erreicht ist (#ccc 80%). Diese letzte Farbe behält der Verlauf bis 100%, also bis ganz nach rechts.

Übrigens: In diesem Artikel lassen sich alle Codeblöcke bearbeiten (markiert mit dem Symbol ). Probier’s einfach mal aus: Ändere oben die 30% in eine 60%, oder mache aus 90deg ein 80deg und beobachte, wie sich der Verlauf verändert. Falls du den ursprünglichen Code wiederherstellen möchtest, aktualisiere die Seite in deinem Browser („Neu laden“).

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 hellgrau nach grün. Danach beginnt er wieder bei violett und wiederholt sich über die gesamte Fläche.

Beispiel 2: Ein Farbverlauf von violett über hellgrau 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:

Farbbeginn ist violett (#839, ohne Prozentangabe), bei 10% liegt ein helles Grau (#eee 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 Code dafür sieht so aus:

Erklärung: Der oberste Verlauf geht von transparent nach #deb (hellgrün) und ist 30% breit. Darunter liegt ein Farbverlauf von transparent nach #839 (lila) 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 #e32 (rot).

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:

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 →