Layer Styles: CSS3 wie Photoshop verwenden

layer-styles-dialog

Tools zur vereinfachten und vor allem intuitiven Handhabung von CSS3 gibt es mittlerweile einige. Mit Layer Styles ist nun ein weiteres Hilfsmittel an den Start gegangen, dass die bereits wohl bekannten Funktionen, sowie das Interface der Photoshop-Ebenenstile verwendet um Elemente mit CSS3 zu gestalten.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Das Erscheinungsbild von Layer Stiles ist erstaunlich simpel und erinnert stark an den Ebenenstile-Dialog aus Photoshop.

css3-tool-layer-styles-homepage
Startseite von Layer Stiles

Über verschiedene Regler und Einstellungsmoglichkeiten könnt ihr den Schlagschatten (drop shadow), den Schatten nach Innen (inner shadow), die Farbüberlagerung (background), die Kontur (border) und sogar abgerundete Ecken (border-radius) kinderleicht gestalten. Wenn Ihr mit dem Design fertig seid, so kann über einen Button unten links, der CSS-Code angezeigt und kopiert werden.

css3-tool-layer-styles-code-view
Code-Export von Layer Stiles