CSS3 Gradients

Mithilfe des CSS3 Features: gradients ist es möglich Farbverläufe auf einer Webseite anzeigen zu lassen, ohne das dazu ein Bild geladen werden muss. Doch wie genau funktioniert das?

Der Syntax

Um allen aktuellen Browsern gerecht zu werden sind aktuell 4 Zeilen CSS notwendig. Diese werden im folgenden erklärt.

div {
background-color: #1a82f7; /* fallback color */
background-image: url(bild.png); /* fallback image */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";
background-image: -moz-linear-gradient(top, #fff 0%, #fff 67%, #d2d2d2 100%);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#000));
}

Fangen wir in der letzten Zeile an:

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#000));

alle Webkit-Browser (Safari, Chrome, etc) werden einen linearen Farbverlauf zeichnen. Im Beispiel wird der Farbverlauf von links oben (0% 0%) nach links unten (0% 100%) in den Farben von #fff nach #000 dargestellt.

Die vorletzte Zeile realisiert den Farbverlauf für den Firefox. Im Beispiel

background-image: -moz-linear-gradient(top, #fff 0%, #fff 67%, #d2d2d2 100%);

passiert folgendes: es wird wieder ein linearer Farbverlauf dargestellt, der wieder von oben nach unten verläuft. Oben wird mit der Farbe #fff (weiß) begonnen, die bis zu 2/3 Des Bildes beibehalten werden. Danach startet der eigentliche Verlauf, der im Bild unten mit der Farbe d2d2d2 endet. Anstatt des linearen Farbverlaufs ist auch ein runder Farbverlauf möglich: -moz-radial-gradient. Die Parameter sind die selben.

Die dritte und vierte Zeile arbeiten im Internet-Explorer. Sollte der Internet-Explorer die Zeilen nicht verwenden, so wird eine der folgenden 2 Varianten verwendet.

Sollte der Browser kein CSS3 unterstützen so wird das Bild angezeigt, dass in der vorletzten Zeile eingetragen wurde. Dieses Bild muss natürlich auf herkömmliche Weise (HTTP-Request) übertragen werden. Der Vorteil von CSS3 kann von diesen Menschen nicht genutzt werden.
Sollte der Nutzer Bilder auch abgeschaltet werden, so wird der Bereich in der Farbe eingefärbt, die in Zeile eins defininert.

Der Syntax im Detail

• Internet-Explorer
• Webkit
• Firefox

Fazit

CSS-Gradienten sind ein mächtiges Werkzeug um Farbverläufe effizient auf Webseiten darstellen zu können. Webentwickler, die alle 4 Zeilen des Beispiels verwenden, können die Ladezeiten von Webseiten enorm verbessern. Nutzer von sehr alten Browsern haben keine zusätzlichen Nachteile.