Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Muster über Farbverläufe erzeugen

Wir können nicht nur Farbverläufe über die Angabe von gradient erzeugen. Durch harte Übergänge und Wiederholungen können wir sehr komplexe Muster aufbauen.

Harte Übergänge bei einem Farbverlauf erzwingen

Auch wenn es sich merkwürdig anhört, dass man einen harten Übergang bei einem Farbverlauf möchte – in manchen Fällen macht es Sinn.

In unserem Beispiel nutzen wir 2 Farben (wenn Schwarz auch nicht wirklich eine Farbe ist, aber verbale Kleinkrämerei lassen wir mal außer acht).

Für einen harten Übergang geben wir beiden Farben die gleiche „Breite“ mit – in unserem Beispiel 50%.

background-image: linear-gradient(yellow 50%, black 50%);

Beide Farben werden jetzt mit einem harten Übergang nebeneinander angezeigt und beide Farbbereiche nehmen die Hälfte des verfügbaren Platzes in Anspruch.

Farbverlauf mit harten Übergängen

Wollen wir ein Muster erzeugen, benötigen wir dazu Wiederholungen. Diese Wiederholungen werden über die Zuweisung einer Größe für unseren „Farbverlauf“ erreicht. Die CSS-Anweisung background-size macht genau dieses. Und ist nun diese Hintergrund-Größenzuweisung kleiner als der verfügbare Platz, wiederholt sich der Hintergrundverlauf einfach so oft wie vom Platz her möglich und wir erhalten ein Muster:

background-image: linear-gradient(yellow 50%, black 50%);
background-size: 50px 50px;

Als Ergebnis bekommen wir eine Bienenmuster:

Streifenmuster durch linear-gradient und background-size

Hiermit können auch sehr komplexe Muster erzeugt werden. Folgendes Stoffdeckenmuster wollen wir über CSS umsetzen.

Karomuster über CSS erzeugen

Für mehr Effekt arbeiten wir mit transparenten Bereichen und halbtransparenten Bereichen. Hierzu nutzen wir bei der Farbfestlegung die Angabe über HSLA. Der letzte Wert ist die Transparenz der gewählten Farbe, die über die ersten 3 Werte festgelegt wird. Mehr zu HSLA bitte im entsprechenden Kapitel nachschlagen.

background-image: 
  linear-gradient(90deg, 
        transparent 50%, 
        hsla(0, 50%, 50%, .5) 50%, 
        hsla(0, 50%, 0%, .5) 50%)
;
background-size: 150px 150px;

Bisher haben wir kein Karomuster, sondern nur Streifen:

Streifenmuster noch ohne Karoeffekt

Jetzt kommt der Trick. Wir geben ein zweiten harten Farbverlauf gedreht mit. Bitte auf das unscheinbare Komma achten!

background-image: 
  linear-gradient(90deg, 
        transparent 50%, 
        hsla(0, 50%, 50%, .5) 50%, 
        hsla(0, 50%, 0%, .5) 50%)
  ,
  linear-gradient(0deg, 
        transparent 50%, 
        hsla(0, 50%, 50%, .5) 50%, 
        hsla(0, 50%, 0%, .5) 50%)
;
background-size: 150px 150px;

Hier sehen wir den fertigen CSS-Code. Der Trick neben den halbtransparenten Bereichen ist, dass wir 2 wiederholende um 90 Grad zueinander gedrehte Streifen mitgeben. Das können wir sehr einfach, indem nach dem ersten Befehl durch ein Komma ein weiterer mitgegeben wird. Und bei dem zweiten drehen wir den Winkel auf unseren Wunschwert.

Somit erhalten wir unser gewünschtes Ergebnis:

Karomuster über CSS erzeugen

Wir können beliebig viele Werte über Komma mitgeben. Nutzen wir eine weitere Angabe und drehen den dritten Winkel auf 45 Grad erhalten wir:

background-image: 
  linear-gradient(90deg, 
        transparent 50%, 
        hsla(0, 50%, 50%, .5) 50%, 
        hsla(0, 50%, 0%, .5) 50%)
  ,
  linear-gradient(0deg, 
        transparent 50%, 
        hsla(0, 50%, 50%, .5) 50%, 
        hsla(0, 50%, 0%, .5) 50%)
,
  linear-gradient(45deg, 
        transparent 50%, 
        hsla(0, 50%, 50%, .5) 50%, 
        hsla(0, 50%, 0%, .5) 50%)
;
background-size: 150px 150px;

Hier sieht die Ausgabe nach vielen Dreiecken aus:

CSS Muster erzeugen über gradient - Dreiecke