CSS Hat is a new Photoshop extension that makes it easy for designers to translate their Photoshop mockups to the web by giving you the CSS code for your layer styles.
Just click a layer, see it’s CSS, copy it into clipboard, and paste it into your favorite editor and you are ready to go!
CSS Hat started as a weekend project on Startup Weekend Prague, where the guys from CSS Piffle had an idea to translate Photoshop layer styles to CSS3. They had a proof of concept working in 24 hours and decided to polish it into a commercial product.
CSS Hat shows you the CSS for the currently selected shape and will even measure and detect rounded corners on vector shapes – so you can be sure to get the exact same thing in browser.
There are also options to add comments in the css that describe where the value is coming from, adding browser prefixes, include the width and height of the shape, and generate a rule based on the layer name.
In addition to adding browser prefixes, CSS Hat will even generate SVG for IE9!
CSS Hat is a promising first release and the team already has a plan for the future with LESS, SASS, and COMPASS support, in addition to other features like text properties.