csshat

CSS Hat – Turn Photoshop Layer Styles into Clean CSS3

By: Category: News

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!

CSSHatPS 750x481 CSS Hat Turn Photoshop Layer Styles into Clean CSS3

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.

CSSHatWindow CSS Hat Turn Photoshop Layer Styles into Clean CSS3

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.

You can find out more about CSS Hat on their website or on Twitter.

  • http://miralize.com Sean O’Grady

    Oh dear. Check your links before you publish…

  • http://twitter.com/_kgn David Keegan

    Oh my sorry about that, fixed now thanks!

  • http://twitter.com/digideth digideth

    take a short 10min walk before you hit the post button. it helps me. quality over speed any day of the week.

    small detail missed… launched OSX only for the moment. they say WIN is in dev but they didn’t give me a time frame.

  • http://joshuasortino.com/ Joshua Sortino

    CSS Hat is exactly what I needed at this point in time. While Sketch could be the solution in a year or two, this allows me to continue developing quickly and accurately without drastically changing my workflow.