CSS3 gradient jetzt auch in Opera

Gestern wurde mit der Veröffentlichung der Beta von Opera 11.10 der Support von linear-gradient unterstützt.

Damit reiht sich Opera in die Liste der Browser (z.B. Chrome, Safari, Firefox) die Hintergrundverläufe mit CSS3 unterstützen.

Auch Opera hat wie viele Andere gradient über den Vendor-Präfix implementiert.

background: -o-linear-gradient (yellow, blue);

Man kann also die Eigenschaften für CSS3 Gradient jetzt wie folgt angeben:

.linear-top {
/* Für WebKit alt (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom, ⏎
from(#c8482c), to(#fff));

/* Für WebKit neu (Safari, Chrome, etc.) */
background: -webkit-linear-gradient(top, #c8482c, #fff);

/* Für Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #c8482c, #fff);

/* NEU NEU NEU - Für Presto (Opera etc) */
background: -o-linear-gradient(top, #c8482c, #fff);

/* aktueller W3C working draft */
background: linear-gradient(top, #c8482c, #fff);
}

Leider unterstützt der Anfang der Woche veröffentlichte Internet Explorer 9 kein CSS3 linear-gradient, sondert nur die Möglichkeit über SVG. Wer unbedingt einen einfachen linear-gradient (Verlauf) für Internet-Explorer 6-8 einbinden möchte, dem empfehle ich den Artikel aus dem CSS3 Adventskalender 2010.