Dez 2011

CSS3 Gradient • Verlauf als Hintergrundbild

Der CSS-Stil background-image: gradient() erzeugt einen Verlauf ohne Hintergrundbild – rein auf der Basis des Stylesheets.

background-image: gradient() wurde 2008 in Webkit (Apple Safari, Unix KDE, Google Chrome) vorgestellt. Firefox hat die CSS-Eigenschaft mit Version 3.6 übernommen, allerdings mit einer eigenen Syntax.

Heute hat der CSS-Stil gradient dieselbe Syntax in allen Browsern, aber der Browser-Präfix (-webkit, -moz, -ms, -o) muss vorangesetzt werden. Internet Explorer wird CSS gradient ab Version 10 unterstützen.

In Webkit-basierten Browsern kann CSS Gradient für background-image, border-image, list-style-image und generated content eingesetzt werden, in Firefox für background-image.

CSS3 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.

                                   zweiter Color Stop ---+
                                                         |
                         erster Color Stop ---+          |
                                              |          |
background-image: linear-gradient(left, white 0%, black 50%);
background-image: linear-gradient(top, 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.

An welcher Stelle der Verlauf beginnt, wird durch die %-Angabe jedes Color Stops festgelegt. Für einen sauberen Verlauf müssen die Color Stops also von links nach rechts immer höhere Werte aufweisen.

0
50
                                                color-stop  color-stop
                                                     +         +
                                                     |         |
background-image: -moz-linear-gradient(top left, #ccc 25%, #000 75%);
background-image: -webkit-linear-gradient(top left, #ccc 25%, #000 75%);
background-image: -ms-linear-gradient(top left, #ccc 25%, #000 75%);
background-image: -o-linear-gradient(top left, #ccc 25%, #000 75%);
                        |             |
                        +---> Typ     +---> Anfangspunkt

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

Verläufe in Internet Explorer

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

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

Internet Explorer Filter und Effekte: Introduction to Filters and Transitions

CSS gradient: Multi-Color-Verläufe mit mehreren Color Stops

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

background-image: linear-gradient(left, 
                                  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.

CSS gradient: Radiale Verläufe

Sowohl Webkit-basierte Browser als auch Firefox unterstützen auch einen radialen (kreisförmigen) Verlauf – Internet Explorer bis einschl. Version 9 nicht. 

background: radial-gradient(center, 
                            circle farthest-corner, 
                            yellow 0%, 
                            blue 25%, 
                            white 75%);

Auch hier muss zurzeit noch der Browser-Präfix vorangesetzt werden.

Anstelle von circle kommt auch ellipse für eine Elipsenform in Frage. In einem quadratischen Block würde der Wert ellipse denselben Effekt wie circle zeigen. Eine Ellipse entwickelt sich automatisch, wenn die umfassende Box nicht quadratisch ist.

  • Mit farthest-corner passt sich der Kreisverlauf an den Raum zwischen dem Zentrum und der Entfernung der Ecke an, die am weitesten vom Zentrum entfernt liegt.
  • Mit dem Wert closest-side passt sich der Kreisverlauf zwischen den Startpunkt und der schmalsten Seite des umfassenden Blocks an. 
background: radial-gradient(center, 
                            ellipse closest-side, 
                            yellow 0%, 
                            blue 25%, 
                            white 75%);

Am Ende gilt hier zurzeit wieder einmal: Ohne Browser-Präfix wird's nichts mit dem Verlauf.