phpundmysql.de

Die Zeit PNG-basierter Farbverläufe könnte eigentlich der Vergangenheit angehören, immerhin ist linear-gradient Teil der W3C-Spezifikation für CSS3. Ganz so weit ist es allerdings noch nicht: um einen einfachen Farbverlauf im Browser hinzubekommen, bedarf es einem Spagat zwischen neuer Syntax und einem kleinen Kunstgriff in die SVG-Trickkiste. Für jede CSS Engine ist eine Sonderlocke dabei, auf den Fallback muss kein Vertreter der aktuellen Browsergeneration mehr zurückgreifen.

background-color: #ff0000; /* Fallback */
background-image:url( gradient.svg );
background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from( #ff0000 ), to( #0000ff ) );
background-image: -moz-linear-gradient( 100% 100% 90deg, #0000ff, #ff0000 );
filter: progid:DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr=#ff0000, endColorstr=#0000ff );
-ms-filter: "progid:DXImageTransform.Microsoft.gradient ( GradientType=0, startColorstr=#ff0000, endColorstr=#0000ff )";

SVG-Grafik
Die SVG-Grafik wird derzeit nur noch vom Opera benutzt. Die Beta von Opera 11.10 zeigt jedoch eine kommende Unterstützung ähnlich zu Forefox und Webkit: Mit background: -o-linear-gradient ( #0000ff, #ff0000 ); wird vorübergehend eine Hersteller-eigene Syntax geschaffen, bis der CSS3 Standard für Farbverläufe gesettelt ist.
Neben Opera können auch die Webkits und der IE9 mit SVGs umgehen, nur der Firefox mag das nicht richtig verstehen. Da eine reine CSS Lösung allerdings das Ziel sein sollte, wollen wir nicht darauf hin arbeiten.
Wer trotzdem diesen Weg wählen will oder muss, kann mit diesem grundlegenden Beispiel einer gradient.svg starten.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
  <linearGradient id="grad" x1="0" y1="0" x2="0" y2="100%">
    <stop offset="0" stop-color="#ff0000" />
    <stop offset="1" stop-color="#0000ff" />
  </linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#grad)" />
</svg>

Browser-eigene Syntax
Wie bei neuen CSS-Features üblich, implementieren die Browser-Hersteller spezifische Syntax, solange sich der CSS3-Standard noch in Abstimmung befindet. Die Webkits (Safari, Chrome) nutzen dabei das Präfix -webkit, Firefox kommt mit einem -moz daher. Ansonsten orientiert sich die Syntax schon stark an dem Proposal der W3C. Microsoft setzt wiedrum auf die hauseigenen Filter, was es schwer macht, die Schreibweise im Kopf zu behalten. Darüber ist die Umsetzung für den IE ein Zweizeiler - nicht gerade kurz.

Aus- und Umwege
Egal wie man es macht, man kann es nicht allen recht machen. Mal mit SVG, mal ohne, außerdem überlappen sich die Implementierungen. Man kann sich also entweder auf SVG mit einem Sonderweg für den Firefox begnügen, oder aber mit mannigfacher Syntax und einem Opera-Umweg. Aus zweierlei Gründen erscheint der letzte Ausweg charmanter: Zum einen ist der Opera nicht so verbreitet, so dass man sich besser nach dem FF richten kann. Zum zweiten wollen wir ja weg von eigenen Grafikdateien für Hintergünde. Und zu guter letzt müssen wir nur noch kurze Zeit warten, bis der Opera lineare Farbverläufe nativ abbildet.