Webdesign, Tutorials und mehr - Webmasterpro.de

CSS3 Tool: „Ultimate CSS Gradient Generator“

Ein Webdesign mit Farbverläufen bedeutete lange Zeit für den umsetzenden Programmierer, dass er Hintergrundbilder erstellen und einbauen musste. Die CSS-Gradiant-Funktion wurde schon vor einigen Jahren von Webkit eingeführt. Da aber nur die wenigsten Browser diese Funktion unterstützen, wurde sie bisher eher selten verwendet und der sichere Weg über Hintergrundbilder gewählt.

Im allgemeinen CSS3 und HTML5 Hype erlangt aber auch diese Funktion nun immer mehr an Bedeutung. Momentan gibt es noch keinen browser-übergreifenden Definitionstag, das heißt für jeden Browsertyp muss der Gradiant mit entsprechendem Präfix angegeben werden.

Hier ein kleiner Überblick über den 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 linearen Verlauf zu erstellen)

Beispiel eines Cross-Browser Verlaufs:

1
2
3
4
5
6
7

background-color: red; /* Fallback Color */
background: -webkit-gradient(linear,left top,left bottom,from(red),to(blue));
background: -webkit-linear-gradient(top, red 0%, blue 100%); 
background:    -moz-linear-gradient(top, red 0%, blue 100%); 
background:     -ms-linear-gradient(top, red 0%, blue 100%); 
background:      -o-linear-gradient(top, red 0%, blue 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff');

Mit Hilfe der „Präfix-Gradients“ können aber nicht nur einfache, lineare Verläufe erstellt werden, das Ganze geht hin bis zu richtig aufwändigen Patterns. Einen schönen Überblick über die Möglichkeiten kann man sich auf der Seite http://leaverou.me/css3patterns verschaffen.

Wer sich aber in den vielfachen Positions- und Farbangaben zu verlieren scheint, ist wohl mit dem Tool „Ultimate CSS Gradient Generator“ von ColorZilla gut beraten.
Hiermit kann man fast wie in Photoshop seinen individuellen Verlauf zusammenmischen und erhält den fertigen CSS-Code, der nur noch in die eigene Datei kopiert werden muss.

http://www.colorzilla.com/gradient-editor/

Kommentare: CSS3 Tool: „Ultimate CSS Gradient Generator“