Mittwoch, Januar 25, 2012

Farbverläufe mit CSS

Es gab eimal eine Zeit, in der wurden Farbverläufe mit einer Grafik realisiert. ZUgegeben, diese Zeit ist noch nicht ganz vorbei, es ist immer noch die einzige 100% sichere Methode einen Verlauf crossbrowsertauglich zu gestalten. Aber die meisten modernen Browser verstehen genug CSS3, um Grafiken überflüssig zu machen.
Allerdings gibt es bis heute keinen browser-übergreifenden Definitionstag, das heißt für jeden Browsertyp muss der Verlauf mit entsprechendem Präfix angegeben werden.

En kleiner Überblick über den momentaren Browser-Support:

Firefox ab Version 3.6 mit -moz- Präfix
Chrome ab Version 10.0 und Safari ab Version 5.1 mit -webkit- Präfix
Opera ab Version 12.0 mit -o- Präfix
Internet Explorer voraussichtlich erst ab Version 10 mit -ms- Präfix
(momentan gibt es aber die Möglichkeit über das filter-Attribut auch ab IE7 einen einfachen inearen Verlauf zu erstellen)

Das Ganze ist aber ziemlich unübersichtlich in der Praxis. Und da kommt das Tool „Ultimate CSS Gradient Generator“ von ColorZilla ins Spiel.
Hiermit kann man seinen individuellen Verlauf zusammenmischen und erhält den fertigen CSS-Code, der nur noch in die eigene Datei kopiert werden muss.
Super Sache.

Keine Kommentare: