Loading ...

Loading ...

From The Blog

Stay updated with our latest news

How To Extract CSS3 Properties from Photoshop


Majority of web or user interface designers are using Photoshop for creating mockups design. Thanks to Photoshop popularity there a lot of plugins to make designer work easier.

Photoshop is good at creating fancy buttons or other web elements. But when comes to CSS3, it’s a different story. A lot of web worker relying on CSS3 effects to make fancy buttons or other design elements that just look exactly like in the mockup. Creating CSS3 effects in Photoshop without plugin is quite tedious. There’s a Photoshop plugin that can help you making fancy CSS3 effects with a single click, called CSS3Ps.

CSS3Ps support Photoshop CS3 to the latest CS6. It works on OS X and Windows. However, for Lion OS X 10.7 users must install a patch from Adobe.

CSS3Ps Palette

After installation, to activate CSS3PS go to menu Window > Extension > CSS3Ps. The window palette is very simple. Actually, it’s a button. All you have to do is click the palette window and then CSS3 codes for your web design project will be ready in less than a minutes. CSS3Ps will render the code in their website, and you have to wait for around 20 seconds to see the result.

CSS3Ps can interpret Photoshop layer styles really well. But be careful, it doesn’t understand all layer styles available in Photoshop. CSS3Ps only understand layer styles which widely used in web design. Supported layers styles are: Stroke, Inner Shadow, Drop Shadow, Color Overlay, Gradient Overlay and Inner Glow. However, after testing we found out that CSS3Ps do not understand stroke type outer, inner or center. It always set the stroke setting to outer. Which means if you use inner shadow 2px to make 1 pixel inset style on a button, in CSS3 codes you will ended up in 2 pixels inset shadow.

CSS3Ps result

This is a simple tools that can save a lot of times writing CSS3. At first, I thought CSS3Ps is an offline plugin. When I found out it needs to open a browser to get CSS3 I kinda irked a bit. But, who’s doesn’t work online these days?.