Photoshop Layer Styles in CSS3

• By Jad Limcaco
• July 28th, 2011
• Tools
• 6 Comments

I just ran across this awesome project by Felix Niklas and it blew my mind. it’s an HTML5 app for creating CSS3 in an intuitive way. The interface is very similar to Photoshop and functions just like it as well. I wrote a little preview/breakdown/review of it.

The Breakdown

LayerStyles is just like you favorite graphic editor – but in your browser. And it creates CSS. The screenshot above is how the editor looks like. There’s a lot of really interesting features that’s included with it.

1. Layer Styles
   This is where you can find some of the default CSS3 layer styles that are included by default. You can also create your own layer styles and what’s nice about this is that your color swatches, gradients and styles are locally stored so when you open this site up again, you don’t have to re-create your styles again.
2. Style Properties
   This online app gives you some different styles that you can customize. There are 5 different ones that you can use. There is a drop-shadow, an inner-shadow, background, border, and border-radius. The sliders and settings look and work just like if you were still in Photoshop. The gradient tool is a little-buggy but is definitely still usable.
3. Preview
   This is your layer styles preview. When you edit the layer style properties, the changes are shown here.
4. Drag and Drop Images
   I thought this was neat. You can actually drag your own images here and use it for reference. You can also use their color-picker and select colors from your reference image. This comes in real-handy if you are going to try to re-create a button or something.
5. CSS3 Code
   This is where you can see your CSS3. You can easily select the code and copy it. There’s a copy button but I’ve tested in my browser and it doesn’t seem to work. Also, the only gripe I have is that some of the vendor prefixes aren’t used. For instance, if I create a rounded border, it doesn’t include the vendor prefix for Mozilla or webkit. But that’s no problem for me because I can easily just paste the code into PrefixMyCSS and let them ad the specific vendor prefixes that I need.

It took me all of 30 seconds to figure out how this tool works and I’ve added it to my bookmarks. This is definitely going to be very helpful for me. My favorite site to create CSS3 before was CSS3 Generator but I think I’ll start using LayerStyles from now on. With some more tweaks and additions, this tool would be perfect.

Additional Information

• LayerStyles Website
• This project is open-source and can be found on GitHub.
• It was created by Felix Niklas.
• PrefixMyCSS – Add vendor prefixes to your CSS.

What do you all think of this HTML5 App? What are some improvements that you think can be made? Let me know what your thoughts are in the comments. Also, feel free to ask me any question you may have. Thanks!