Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 9. Mai 2012

CSS3: Verläufe so einfach wie in Photoshop mit ColorZilla

Farbverläufe in CSS3 zu erstellen, ist gerade bei komplexeren Verläufen gar nicht so einfach. Vor allem nicht, da eine grafische Bedienoberfläche fehlt. Mit dem CSS Gradient Generator von ColorZilla gibt es jedoch genau eine solche Oberfläche, wie man sie aus Photoshop und anderen Bildbearbeitungsprogrammen kennt. So wird das Erstellen von Verläufen fast schon zum Vergnügen.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren


Die GUI des CSS Gradient-Generator

Anzeige

ColorZilla ist als Browser-Erweiterung relativ bekannt. Mittels einer Pipette werden Farben einer Website ausgelesen und als Hexadezimalwert oder RGB-Wert ausgegeben. Mit dem CSS Gradient-Generator, der unabhängig von der Erweiterung nutzbar ist, ist zudem die Erstellung komplexer CSS3-Verläufe möglich.

Farbverläufe erstellen

Der Gradient-Generator bringt eine Handvoll vordefinierter Verläufe mit. Interessanter ist aber natürlich die Definition eigener Gradienten. Wie in einem Bildbearbeitungsprogramm fügt man Farben zu einem Verlauf hinzu oder platziert sie um, um ihre Position und damit den Verlauf an sich zu verändern. Auch Transparenzen lassen sich beliebig einbauen. Ebenso ist es möglich, die Sättigung und Helligkeit zu beeinflussen. Natürlich kann auch die Richtung des Verlaufs angeben werden – vertikal, horizontal, diagonal oder radial.

Da der Internet Explorer keine Verläufe mit mehr als zwei Farben darstellen kann, gibt es eine spezielle IE-Vorschau, die den Verlauf so darstellt, wie er im Internet Explorer aussieht.

Verlauf kopieren und einfügen

Entspricht das optische Ergebnis der eigenen Wunschvorstellung, muss nur noch der CSS-Quelltext kopiert werden. Alle nötigen Vendor-Präfixe sowie die spezielle IE-Auszeichnung per „filter“-Eigenschaft werden durch den Generatoren erledigt.

Damit wenigstens der Internet Exploder 9 komplexe CSS3-Verläufen anzeigt, kann der CSS-Quelltext um eine per Data-URI bereitgestellte SVG-Grafik erweitert werden. Diese enthält den erstellten Hintergrund als Grafik.

Fazit: Mit dem CSS Gradient Generator sind Farbverläufe im Handumdrehen erstellt und ins eigene Stylesheets kopiert. Für eine größtmögliche Unterstützung aktueller Browser ist gesorgt.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

3 Kommentare

  1. wow- das tool ist großartig! wann wird eigentlich der internet explorer offiziell verboten? :-)

  2. Vielen Dank! Sowas habe ich gerade gesucht! :-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.