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.

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 14 Kommentare

  1. Holger
    schrieb am 20.05.2011 um 11:45 Uhr:

    Danke…

    Antworten
  2. bu
    schrieb am 17.05.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.

    Antworten
  3. Felix
    schrieb am 17.05.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)

    Antworten
  4. Tanja Handl
    schrieb am 17.05.2011 um 12:06 Uhr:

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

    Antworten
  5. Jens Bayer
    schrieb am 17.05.2011 um 10:42 Uhr:

    Tatsächlich. Einfacher. Danke! :)

    Antworten
  6. Jens Bayer
    schrieb am 17.05.2011 um 09: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…

    Antworten
  7. bu
    schrieb am 17.05.2011 um 08:58 Uhr:

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

    Antworten
  8. Manuel
    schrieb am 17.05.2011 um 08: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…

    Antworten
  9. Moev
    schrieb am 17.05.2011 um 08: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

    Antworten
  10. Marco
    schrieb am 17.05.2011 um 07:35 Uhr:

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

    Antworten
  11. Marco
    schrieb am 17.05.2011 um 07:30 Uhr:

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

    Antworten
    • Jonas Hellwig
      schrieb am 17.05.2011 um 07:33 Uhr:

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

      Antworten
  12. bu
    schrieb am 17.05.2011 um 07:13 Uhr:

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

    Antworten
    • Jonas Hellwig
      schrieb am 17.05.2011 um 07:27 Uhr:

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

      Antworten

Kommentar zu dieser Seite

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 →