CSS 3 Gradients
Nico Brünjes am
in: code, css3
Einige der neuen CSS3-Funktionalitäten sind ein wenig schwer zu merken, vor allem da man sich hinsichtlich der Syntax bei Webkit und Mozilla noch nicht ganz einige ist. Ein schönes Beispiel sind gradients, für die es sogar noch M$ Filter gibt, den man setzen kann, wenn man das will. Und nur bei linearen Farbverläufen. Einmal zum Mitschreiben:
.linear { /* Firefox --> https://developer.mozilla.org/en/CSS/-moz-linear-gradient */ background: -moz-linear-gradient(0 0, #000, #fff); /* Webkits --> http://webkit.org/blog/175/introducing-css-gradients/ */ background: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#fff)); /* IE 5.5 - IE 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#FFFFFFFF); /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#FFFFFFFF)"; } .radial { /* Firefox --> https://developer.mozilla.org/en/CSS/-moz-radial-gradient */ background: -moz-radial-gradient(40% 40%, farthest-side, #fff, #000); /* Webkits --> http://webkit.org/blog/175/introducing-css-gradients/ */ background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#fff), to(#000)); }
Download: css3-gradient.css
Der Firefox nimmt für die Position des Gradients nur ein Argument. Wenn dieses ein Punkt P1 ist, dann zeichnet der Firefox den Verlauf von diesem Punkt zu einem Punkt P2, der durch Punktspiegelung von P1 am Elementmittelpunkt entsteht. Das heißt, wenn P1 “0 0″ ist, dann zeichnet der Firefox einen Gradient von links oben nach rechts unten. Deshalb muss man als erstes Argument im -moz-linear-gradient den besonderen Wert top angeben, wenn man einen Gradient von oben nach unten haben will.