kulturbanause Blog

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

Layer Styles: CSS3 wie Photoshop verwenden

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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

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

14 Kommentare

  1. bu

    Verfasst am 17. Mai 2011 um 7:13 Uhr.

    will bei mir im firefox 4.0.1 leider nicht so recht… :(

    • Jonas Hellwig

      Verfasst am 17. Mai 2011 um 7:27 Uhr.

      @bu: Bei mir läuft es im Firefox einwandfrei.

  2. Marco

    Verfasst am 17. Mai 2011 um 7:30 Uhr.

    Läuft bei mir im FF auch nur teilweise, vor allem der Colorpicker will gar nicht.

    • Jonas Hellwig

      Verfasst am 17. Mai 2011 um 7:33 Uhr.

      @Marco: Sehr seltsam. Bei mir läuft auch der ColorPicker. Habs gerade noch einmal getestet. Firefox 4.0.1 am Mac ..

  3. Marco

    Verfasst am 17. Mai 2011 um 7:35 Uhr.

    Auch Chrome funzt nicht richtig. Ich kann auch nicht von RGB auf HEX wechseln. Liegt möglicherweise an Windows.

  4. Moev

    Verfasst am 17. Mai 2011 um 8:28 Uhr.

    Hi,
    Sehr nettes Teil. Sind aber noch mehrere kleine Bugs drinnen. Manche sachen werden noch nicht berechnet (eventuell, weil es das beim Firefox noch nicht gibt?). Habe auch den Neusten Firefox. Werde das Später mal mit Chrome testen, da sollte ja alles soweit laufen :)

    Aber trotzdem eine sehr coole Idee und gut umgesetzt. Ich freue mich schon, wenn in 20 Jahren CSS3 mal Standart ist xD

  5. Manuel

    Verfasst am 17. Mai 2011 um 8:32 Uhr.

    Coole Idee – die Frage ist wie lange es dauert bis Adobe ein ähnliches Feature in Photoshop einbaut und beim exportieren von Slices auch gleich ein Stylesheet mit exportiert…

  6. bu

    Verfasst am 17. Mai 2011 um 8:58 Uhr.

    hm, ist hier winxp und ff 4.0.1. werd später mal den apfel mit entsprechendem browser befragen…

  7. Jens Bayer

    Verfasst am 17. Mai 2011 um 9:33 Uhr.

    Danke – Auch ne Art auf meine E-Mail zu antworten;) Nuja, ich hätte es nicht anders gemacht. Bin mal gespannt was dieses Tool nachher für ne Lösung ausspuckt! Denke aber ne einfachere als meine…

  8. Jens Bayer

    Verfasst am 17. Mai 2011 um 10:42 Uhr.

    Tatsächlich. Einfacher. Danke! :)

  9. Tanja Handl

    Verfasst am 17. Mai 2011 um 12:06 Uhr.

    Schick, schick. Bei mir läuft’s einwandfrei und liefert sehr hübsche Ergebnisse. :)

  10. Felix

    Verfasst am 17. Mai 2011 um 17:13 Uhr.

    @Marco der colorpicker bug in firefox ist bekannt (https://github.com/mrflix/LayerStyles/issues/1) und wird baldest möglich behoben. Wie meinst du das mit wechseln zwischen HEX und RGB im Chrome? Meinst du HSB und RGB?

    Wer weiter Fehler findet, bitte unter https://github.com/mrflix/LayerStyles/issues eintragen oder mir ne Mail schreiben! (mrflix an googlemail)

  11. bu

    Verfasst am 17. Mai 2011 um 18:50 Uhr.

    auf dem apfel läuft die sache in safari einwandfrei :) auf dem firefox auch. allerdings erst, nachdem ein proxy durchgwunken wurde (noscript hat sich gemeldet). hier liegt wahrscheinlich auch der grund, weshalb aus auf dem anderem rechner nicht ging.

  12. Holger

    Verfasst am 20. Mai 2011 um 11:45 Uhr.

    Danke…

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.