CSS, HTML und Javascript mit {stil}

CSS Gradient • Verlauf als Hintergrundbild

CSS Linear Gradient – Verlauf, Farbübergang

CSS background-image: linear-gradient() und radial-gradient erzeugen einen linearen bzw. radialen Verlauf ohne Hintergrundbild – rein auf der Basis von HTML und CSS.

CSS gradient ist ein Bild ohne Maße und ohne Seitenverhältnis – gradient ist keine Farbe und kann nicht mit color verwendet werden.

Verläufe sind keine CSS-Eigenschaften, sondern eher ein Wert für background-image, border-image, list-style-image und generated content (, in Firefox für background-image ?).

background-image: gradient() wurde 2008 in Webkit (Apple Safari, Unix KDE, Google Chrome) vorgestellt. Internet Explorer unterstützt CSS gradient ab Version 10.

CSS Verlauf: Color Stops

Ein Gradient oder Verlauf ist eine gedachte Linie, auf der Farbunterbrechungen (Color Stops) liegen. Im einfachsten Fall gibt es zwei Farbunterbrechungen in einem Verlauf. An jedem Color Stop beginnt eine Farbe, die bis zum nächsten Color Stop in die andere Farbe verläuft.

C2 C1
C1 C2
C1 C2
                                   zweiter Color Stop ---+
                                                         |
                         erster Color Stop ---+          |
                                              |          |
background-image: linear-gradient(to top, white 0%, black 50%)
background-image: linear-gradient(to right, white 0%, black 50%)
background-image: linear-gradient(45deg, white 0%, black 50%)
                                            |        |
                             erste Farbe ---+        |
                                     zweite Farbe ---+

Anstelle von background-image: gradient kann auch background: gradient als Kurzschrift benutzt werden. Farben können als RGB-, HSL-, Hexwerte oder als Farbnamen angegeben werden.

Color Stops legen durch eine %-Angabe fest, an welcher Stelle der Verlauf beginnt. Für einen sauberen weichen Verlauf müssen die Color Stops also von links nach rechts immer höhere Werte aufweisen.

0
50
background-image: linear-gradient(90deg, cornflowerblue 0%, wheat 50%)

repeating-linear-gradient

Anstelle einer langen Liste von Color Stops wiederholt repeating-linear-gradient einen Verlauf.

.bar { 
   background-image: repeating-linear-gradient(
      90deg, 
      hsla(215,30%,100%,0.1) 0%, 
      cornflowerblue 1%, 
      wheat 9%, 
      hsla(215,30%,100%,0.1) 10%); 
}

Gradient von transparent zu Farbe

Mit HSL- und RGB-Farbangaben führt der Verlauf auch von der Farbe zur Transparenz. Die Color Stops werden einmal ohne und einmal mit Alpha-Wert angegeben.

background-image: linear-gradient( 
   hsla(215,30%,70%,0) 20%,
   hsl(215,30%,70%) 70%
);

Alte Syntax / Neue Syntax

Ältere Browser brauchen noch einen Browser-Präfix (-webkit, -moz, -ms, -o) und eine ältere Syntax. Da linear gradient ein Wert von background-image ist, benutzte die alte Syntax die Positionsangaben für background-image (z.b. top left, bottom right).

background-image: -webkit-linear-gradient(top left, white 0%, #9FBFD2 100%); 
background-image: -moz-linear-gradient(right bottom, white 0%, #9FBFD2 100%); 

Die modernen Browser setzen den CSS-Stil gradient für einfache Verläufe stabil mit konsistenter Syntax um. Anstelle der Positionsangabe aus background-image setzt die neue Syntax die Richtung des Verlaufs (z.B. to top, to left, to bottom left). Die Angabe der Richtung durch den Kreiswinkel bleibt auch in der neuen Syntax dieselbe wie gehabt.

background-image: linear-gradient(90deg, silver 25%, red 75%); color-stop color-stop Typ Richtung

Zwischen linear-gradient und der öffnenden Klammer darf kein Leerzeichen oder Zeilenumbruch stehen, sonst interpretiert der Browser den CSS-Stil nicht.

Per Vorgabe läuft der Verlauf von oben senkrecht nach unten (to bottom). Die minimalen Angaben sind Start- und Ende-Color-Stop.

background:linear-gradient( white, black)
background:linear-gradient(to left, navy, green)
background:linear-gradient(to bottom left, yellow, red)

background:linear-gradient(0deg, yellow 5%, orange 70%)
background:linear-gradient(270deg, blue 5%, pink 80%)
background:linear-gradient(135deg, olive 20%, seashell 70%)

Die Richtung des Verlaufs wird entweder durch Schlüsselwörter (z.B. to top) oder durch den Winkel des Verlaufs (z.B. 45deg) geändert.

linear gradient Schema

Gradient mit Multi-Color-Verlauf

Verläufe verarbeiten auch mehr als nur zwei Color Stops.

Der Verlauf kann mit weiteren Color Stops ergänzt werden – wer also den ganzen Regenbogen will, braucht

background-image: 
linear-gradient (90deg, purple, blue, green, yellow, red, purple);

Wenn die Position des Color Stops nicht angegeben wird, verteilt der Browser die Color Stops automatisch auf der Strecke des Verlaufs.

Verläufe in Internet Explorer

Auch Internet Explorer kann Verläufe darstellen, allerdings bis einschließlich Version 9 nicht als CSS-Stil mit background-image, sondern als filter.

filter: progid:DXImageTransform.Microsoft.gradient(
   startColorstr='#ccc', 
   endColorstr='#eee');

Internet Explorer Filter und Effekte: Introduction to Filters and Transitions