WordPress & Webwork

Farbverläufe (Gradients) mit CSS3

Mit Hilfe von CSS3 Farbverläufe zu realisieren ist nichts Neues. Hier ein sehr einfaches Beispiel:

.verlauf {
    background: -moz-linear-gradient(top, #900, #079);
    color:      #fff;
    padding:    2.5em 3em;
}

Dieses Beispiel sieht nachher im Mozilla Firefox folgendermaßen aus:

Ein Farbverlauf mit Hilfe von CSS3 realisiert

Das ist bei weitem nicht alles was mit CSS3 möglich ist, wie der Artikel CSS gradients for all web browsers und der Eintrag in der Mozilla-Dokumentation es deutlich zeigen. Es ist nicht nur möglich lineare sondern auch radiale Verläufe zu erzeugen.

Das ganze ist nicht nur in Firefox sondern auch in anderen Browser möglich. Mit Hilfe von -webkit-gradient kann man die WebKit-Browser (Safari, Chrome), Opera ab 11.10 mit -o-linear-gradient und sogar den Internet Explorer bedienen.

Wobei man bei dem Internet Explorer einiges beachten muss, je nach dem welche Version eingesetzt wird:

  • -ms-linear-gradient IE 10
  • filter: progid:DXImageTransform.Microsoft.gradient(...); IE 5.5-9

Während der Internet Explorer 10 auf CSS3 zurückgreift muss man bei den älteren Versionen noch auf Microsoft-Filter zurückgreifen. Wer keine Lust hat, sich die ganzen "Extrawürste" für die die diversen Browser zu merken, der kann auf den Ultimate CSS Gradient Generator zurückgreifen:

Komfortabler Generator für Farbverläufe in CSS3

Dieser Generator ist nicht nur komfortabel sondern bietet auch sehr viele Funktionen und vor allem generiert man damit Code, mit dem man Geckos (Firefox, SeaMonkey), WebKits (Safari, Chome), Opera und den Internet Explorer berücksichtigt.

1 Reaktion(en)

  1. Bernhard vom BTTV

    Ich finde hier doch immer wieder was ich suche. Danke! Nachdem es mit Firefox gut aussah, musste ich feststellen, dass der Internetexplorer mal wieder Probleme machte. Der Ultimate CSS Gradient Generator hat das Problem behoben. Schade nur, dass man bei einem Webstandard für alle Browser einen anderen Code braucht… 😥

Die Kommentare in diesem Beitrag sind geschlossen.