Serie:CSS3 als Gestaltungselement - Teil 2
Es hat den Anschein, als ob sich CSS3 zu Photoshop hin entwickelt. Jedenfalls ist es unübersehbar, dass zahlreiche Features, die in Photoshop standard sind und dadurch im Webdesign der vergangenen Jahre Einzug hielten, in CSS3 nativ unterstützt werden.
Prägnantestes Beispiel sind die Gradients – die Farbverläufe. Definiert im CSS3-Modul „Image Value“
Einen Nachteil hat die Anwendung derzeit allerdings: Die Browserunterstützung. Webkit unterstützt Gradients, allerdings in eigener Syntax. Mozilla (3.6) unterstützt annähernd die (derzeit!) im Entwurf vorgegebene W3C-Syntax, jedoch nur für background-CSS-Eigenschaften. Opera und IE kennen die Syntax leider noch nicht.
Syntax für lineare Farbverläufe
HPos VPos Winkel [Farbe Position min 2 x kommagetrennt]);-moz-linear-gradient(
HPos VPos Winkel Startfarbe, Endfarbe, [Zwischenfarbe Position optional]);-webkit-gradient(linear,
Startpunkt zwei Koordinaten, Zielpunkt zwei Koordinaten, from(Farbe), to(Farbe), color-stop(Position 0..1, Farbe));
Beschreibung
Standard: HPos und VPos beschreiben Startkoordinaten, Winkel beschreibt den Winkel in dem sich der Verlauf erstrecken soll (0deg = nach links, 90deg = nach oben). Alternativ gehen auch die gängigen Stop-Words wie top oder top left. Farbe und Position beschreibt die aktuelle Farbe und deren Position in Prozent (analog Photoshop). Alternativ kann bei den ersten beiden Angaben die Prozent-Angabe entfallen. Diesen wird dann automatisch 0% (Anfang) und 100% (Ende) zugewiesen werden.
Mozilla: Funktioniert analog, benötigt die Start- und Endfarbe allerdings zwingend ohne Prozentangabe.
Webkit: Vereint alle Gradienttypen in einer Funktion, sodass der Typ linear angegeben werden muss. Ferner wird eine Linie angegeben, an der der Verlauf entlang läuft. 0 0, 0 100% erzeugt also einen senkrechten Verlauf. innerhalb von from() wird die Startfarbe angegeben, innerhalb von to() die Zielfarbe.
Snippets zum Kopieren
1 – vertikal
background-image: linear-gradient(top, black, white); background-image: -moz-linear-gradient(top, black, white) background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));
2 – Reflexion
background-image: linear-gradient(top, #666, #666, #888 5%, #999 25%, #999 48%,#444 52%, #777 90%); background-image: -moz-linear-gradient(top, #666, #666, #888 5%, #999 25%, #999 48%,#444 52%, #777 90%) background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#666), color-stop(.05, #888), color-stop(.25, #999), color-stop(.48, #999), color-stop(.52, #444), color-stop(.90, #777));