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:

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.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.