Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. Oliver
    schrieb am 26.06.2012 um 14:53 Uhr:

    Das ist ja mal ne coole Idee!

    Antworten

Schreibe einen Kommentar zu Anonymous Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: