LearnCreate CSS3 with a Photoshop Interface

I’ve never been a big fan of CSS generators, but this one is just way too cool! LayerStyles, a web app created by Felix Niklas, allows you to generate CSS using an interface that looks almost exactly like the layer styles dialog box in Photoshop.

Screenshot of LayerStyles.org

I advocate writing your CSS manually so that you maintain an intimate understanding of your code, but at the same time, Felix’s tool is more than a curiosity. If you’ve ever created a high fidelity mockup in Photoshop, you’re probably familiar with the tedious process of translating your design into modern markup and styling. Or, perhaps you’ve created a layer style, but you’re unsure how to recreate the effects with CSS.

With LayerStyles, you can fluidly iterate on an effect in the browser environment and watch the CSS generate in real-time. Lots of other CSS generators do this of course, but using the extremely familiar layer styles dialog box makes it much easier for people to make the logical leap between Photoshop and real CSS code.

14 Responses to “Create CSS3 with a Photoshop Interface”

  1. Does your last name “Pettit” refer to the gerbil that you always have stuck to your head?

  2. hav0k on May 26, 2011 at 4:54 am said:

    Used to be the other way around – photoshop then figure out the css3 – funny how times have changed.

  3. espreson on May 23, 2011 at 12:20 pm said:

    LayerStyles is nice addictive css tool I ever used..

  4. Thành Tăng Hiệp on May 19, 2011 at 5:59 am said:

    good job, thanks vety much.
    If code add -webkit- , -moz- prefix is okey kaka

  5. Webtech Nepal on May 18, 2011 at 6:47 am said:

    Thanks for the nice article.

  6. Sébastien Pillien on May 16, 2011 at 8:15 am said:

    It’s a great job, i’ve sent emails to Felix for minor bugs and he answered  very fast. Very sympatic !!
    S.

  7. Raspameti on May 14, 2011 at 1:54 pm said:

     Would someone be so kind to explain me how this work? thanx a bunch!

    • Nick Pettit on May 15, 2011 at 12:31 am said:

      It’s magic! 🙂

      Actually, it’s some combination of HTML, CSS, and JavaScript, which is almost like magic. I’m sure if you emailed or tweeted to Felix, he would be happy to explain. Also, all the code is on Github, so you can explore in depth there if you’d like.

  8. jean1980 on May 14, 2011 at 11:23 am said:

     I couldn’t agree less . . .

  9. raman on May 14, 2011 at 8:41 am said:

     interesting man…making css has never been so easy

    • Anonymous on May 14, 2011 at 11:20 am said:

      i couldn’t agree less . . . 

    • Nick Pettit on May 15, 2011 at 12:29 am said:

      Like I said, this is definitely not a replacement for writing CSS “by hand” but it certainly makes quick experimentation a lot easier. The feedback loop of making a change and then refreshing the browser has a lot more friction than this easy tool!

  10. Sarah Le on May 13, 2011 at 8:03 pm said:

    Awesome! Sometimes, it’s good to not have to reinvent the wheel! Thanks for sharing with us!

Leave a Reply

Learn to code with Treehouse

Start your 7 day free trial today and get access to hundreds of video courses in web development, design and business!

Learn more