CSS3 Tool: „Ultimate CSS Gradient Generator“

1 | 0 Kommentare | 6944 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS3 Tool: „Ultimate CSS Gradient Generator“" mit Ihrem Wissen!

Anzeige Hier werben

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:

 
css
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.

Bild zu CSS3 Tool: „Ultimate CSS Gradient Generator“
http://www.colorzilla.com/gradient-editor/

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher hat 1 Person an der Seite "CSS3 Tool: „Ultimate CSS Gradient Generator“" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS3 Tool: „Ultimate CSS Gradient Generator“" hier bearbeiten.

Mitarbeiter
  • Studiert derzeit Interaktive Medien im 5. Semester an der FH-Augsburg und absolviert gerade das Prxissemester bei Team23.

Kommentare: CSS3 Tool: „Ultimate CSS Gradient Generator“