CSS3 - Hintergrund - Verlauf - Linearer Verlauf
1. linear-gradient
- 18.0
- 12.x
- 5.1
- 23.0
- 10.0
Setzt geradlinige Verläufe. Der grundsätzliche Aufbau sieht so aus.
background:linear-gradient([Richtung],[Farbe von],[Farbe bis],[Colorstops]);
2. Die Richtung
... ist eine optionale Angabe. Wenn man sie weglässt, geht der Verlauf von oben nach unten. Ansonsten gibt es zwei Möglichkeiten. Man definiert eine Richtung
mit den Angaben von X und nach Y. Beim von X sind left oder(!) right erlaubt, beim nach Y
entsprechend top oder bottom. Das Ganze muss dann noch mit dem kleinen aber wichtigen Wörtchen to beginnen, was man allerdings
beim Safari und Chrome weglassen muss. Gibt man nur einen Wert an, so wird der Startpunkt als die gegenüberliegende Seite betrachtet.
/* Von rechts unten nach links oben */
linear-gradient(to left top,...)
/* Von links oben nach rechts unten */
linear-gradient(to right bottom,...)
/* Von unten nach oben */
linear-gradient(to top,...)
/* Von links nach rechts */
linear-gradient(to right,...)
Da uns das aber herzlich wenig Möglichkeiten bei der Gestaltung gibt, kann man auch mit dem Suffix deg und einer Zahlenangabe einen konkreten Winkel
angeben. Also zum Beispiel linear-gradient(38deg,...). Der Bezugspunkt für den Beginn liegt genau so wie in der Geometrie immer oben.
3. Die Farben
... werden wie gehabt angegeben. Zusätzlich besteht noch die Möglich, eine Art von "Stärke" anzugeben. Dabei wird die entsprechende Farbe gemäß dieser Angabe erst mal als
Vollton dargestellt und danach beginnt der eigentliche Verlauf. Erlaubt sind px, % und em.
linear-gradient(... , #000 20px, #f00);
linear-gradient(... , #000, #f00 30%);
Noch mehr Farben
Und wäre das alles nicht schon gut genug, so kann man für einen Verlauf sogar eine x-beliebige Zahl an Farben angeben. OK, das ist ein doch eher theoretischer Wert, bei mehr als vier bekommt man eh Augenkrebs. Aber es funktioniert. Ab drei Werten muss man aber definitiv mit Positionsangaben arbeiten, denn handelt es sich um die schon erwähnten Colorstops.
linear-gradient(... , #000 20px, #f00 50px, #00f 90px, #ff0 120px)
Transparenz
Auch ist das möglich. Anstelle eines Farbwertes gibt man einfach ein transparent an. Dann scheint der darunter liegende Hintergrund durch. Alternative
kann man auch mit rgba arbeiten.
linear-gradient(... , #000, transparent);
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt