CSS3 Layer Styles als HTML5 Webapp

Mit CSS3 lassen sich jede Menge Dinge anfangen, die früher nur mit transparentem GIF/PNG im Design erledigt werden konnten. Vor allem Schlagschatten, und ähnliche Spielereien haben „früher“ zu einer regelrechten Transparenz-Arie geführt. Inzwischen ist es so, das man es in CSS3 lösen könnte, aber der durchschnittliche Printler es nicht schafft zu definieren, wie der Schatten eigentlich auszusehen hat. Derweil schafft er es auch, bei drei verschiedenen Bildern auf einem Entwurf drei verschiedene Schlagschatten einzusetzen.

Screenshot von Layerstyles

Das Browser-Plugin Layerstyles, erstellt im Browser mittels HTML5 ein feines Dialog-Fenster in dem man die Eigenschaften einer Box definieren kann. Lustigerweise erinnert diese Oberfläche stark an Photoshop und ist somit wohl intuitiv bedienbar. Gehostet wird das Projekt übrigens bei Github, ein Blick in den Quelltext empfiehlt sich.

Das Tool eignet sich hervorragend zum Austausch und zur Definition von Layer Styles. Was übrigens derzeit noch ein bisschen fehlt ist ein Export der Daten noch CSS, allerdings handelt es sich bei Layerstyles auch um die Version 0.1 die permanent überarbeitet wird. Also: im Blick behalten! ;)

Ähnliche Beiträge

Font Dragr – Fonts für den Einsatz im Web einfach ... Der Font Dragr ist eine ziemlich coole Sache, man kann einen beliebigen Font einfach auf eine dafür vorgesehene Fläche mittels Drag&Drop ziehen, u...
CSS3 Generator CSS3 ist schön, CSS3 ist nett, CSS3 macht in jedem Browser was es will, und insbesondere etwas anderes. Der Trick an CSS3 ist nicht es zu verwenden, s...
Automatoon – HTML5 Animationen Deluxe Bei meinem ersten Besuch auf Automatoon gab es ein ziemliches auf und ab, angefangen bei "Das kann ja jeder" über "Wie haben sie das bloss gemacht" bi...
Webflow – komplettes CSS3 für Seiten online ... CSS3 Online-Editoren gibt es ja einige in der Cloud. Meistens sind diese für spezialisierte Anwendungen wie zum Beispiel Gradients oder Buttons. Will ...

Schreibe einen Kommentar

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