Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe