CSS3Ps – free cloud-based Photoshop plugin converts layers to CSS3


CSS3Ps – free cloud-based Photoshop plugin converts layers to CSS3

You finding it is taking too much time to convert a simple red box?





into this….?


CSS3Ps is one of the better ways to speed up the process using the following steps http://css3ps.com/Download/.

1. Select the layers you want to convert.


2. Select File > Scripts > Browse menu item


3. Select “CSS3Ps.jsx” file in the folder where it has been downloaded.


4. The script will run and a browser window (partially shown here) opens with the conversion


Some of the supported features are text layers, stroke, inner and outer glow, drop shadow, gradient overlay, border radius, cloud service and SCSS and SASS for Compass. You can request features.

As you can see, with one click on the big CSS3Ps button, this free Photoshop plug in converts your layers by extracting the CSS elements. After conversion you can select the code elements you need and copy and paste where you want.

You can get the free downloads for Adobe Photoshop CC, Adobe Photoshop CS5 and CS6 and Adobe Photoshop CS3 and CS4. Don’t forget you’ll need a patch from Adobe before installing on Mac OS X 10.7 Lion. You may already be familiar with other methods of converting layers to code such as Photoshop Version 13.1 and CSSHat, from a Prague start up (April 2012). This extension is compatible with Windows and Mac, costs about $34.99 (https://csshat.com/), you are paying the license fee perperson not per device, so you can save money.

Conversion methods are compared on http://thesiteslinger.com/blog/photoshop-to-css-conversion-3-methods-compared/, which you might want to take a look at.

You can also watch the video with enthusiastic running commentary by SamDoesThat 🙂

Val Cameron/Dreamlight




No comments yet.

Leave a Reply