kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

Screenshot des CSS3 Gradient Finders
Website des Gradient Finders mit Drag & Drop Upload

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

1 Kommentar

  1. Oliver

    Verfasst am 26. Juni 2012 um 14:53 Uhr.

    Das ist ja mal ne coole Idee!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.