Convert a Photoshop Image to CSS3 Code

There is now a really cool and easy way to convert an image you make in Photoshop to CSS3 code in a couple of simple steps.

www.css3ps.com has a little plugin for Photoshop which does just this.  Head on over there now and check it out, download and install and then lets get cracking!!

I made this simple rectangle in Photoshop which could be the base of a HTML button, I added a red gradient, drop shadow and a inner shadow to make it look bit more snazzy and to show how the program generates the code.  Now coding this in CSS3 straight off might take bit of doing, the gradient codes are a nightmare with all the different browsers using different prefixes and different ways of coding and there needs to be 2 box shadow properties as well.

So how do we get the CSS3 code??

Once you have installed the plugin and activated it, select the rectangle shape then then simply click the CSS3 PS icon.  I have added mine to the side bar for ease of use.

Once you click it, the program will open a browser and start to compile your code for you , which takes few seconds to complete.  Once it is done, it will spit out the CSS3 code for you like below.

Then you just need to change the name of the CSS class and copy and paste the code to your CSS style sheet and BOOM simple way to code your graphics!!

Of course you could use the actual Photoshop image for your button background, but using pure code makes the pages load quicker and is cooler ;)

Thanks!!