CSS-Verläufe aus Bildern generieren: CSS Gradient Finder
Mit dem Online Tool „CSS Gradient Finder“ könnt ihr auf CSS basierende, lineare Farbverläufe auf Grundlage eines Bildes automatisch erstellen lassen.
Per Drag & Drop könnt ihr eine Grafik mit dem entsprechenden Verlauf in das Tool laden, anschließend erhaltet ihr als Ausgabe den entsprechenden CSS-Quellcode inkl. der verschiedenen Vendor-Prefixes für die unterschiedlichen Browser.
Grundsätzlich funktioniert das Tool mit linearen Verläufen einwandfrei, je nach Komplexität des Verlaufs sind allerdings leichte Unterschiede zwischen dem hochgeladenen Bild und dem generierten Verlauf zu erkennen. In der Beispiel-Galerie des „CSS Gradient Finders“ kann man das ebenfalls leicht erkennen.
Im Gegensatz zu vielen anderen Online-Tools steht beim CSS Gradient Finder auch die zum Einsatz kommende Technologie im Vordergrund. Auf GitHub und auf der Website selbst kann der Code eingesehen werden.
Der CSS Gradient Finder benötigt einen Browser mit Canvas-Unterstützung um zu funktionieren. Welche Browser das sind seht ihr hier (Alle außer IE < 9).
Ultimate CSS Gradient Generator als Alternative
Der Ultimate CSS Gradient Generator von Colorzilla kann übrigens mittlerweile auch Verläufe aus Bildern erstellen. Der importierte Verlauf lässt sich anschließend sogar noch über ein Bedienfeld anpassen oder korrigieren und der exportierte Quellcode ist Internet Explorer 9 kompatibel.
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
Das ist ja mal ne coole Idee!