CSS Hat: Turn Photoshop layer to CSS3


CSS Hat

Today we are going to look at a tool that takes a design from Photoshop to the web in a click: CSS Hat.




 
    Details

    Topic : Photoshop / css
    

What It Is ?
CSS Hat is not fully aimed to build an entire site without writing code, rather it’s a way to  grab CSS3 styles on a single element.

How It Works ?


CSS Hat is not a standalone application, it’s a Photoshop plugin. It's not like a heavy photoshop plugin but its just a small plugin to provide a text-based output. CSS Hat has the ability to look and analyze a layer in Photoshop and then duplicate that layer with pure CSS. 

Handling Features: 

1. Layer Styles: It  translates all the layer styles to perfect CSS. The supported   
    styles include shadows, glows, and gradient overlays.

2. Rounded Corners: If you draw a vector shape with a rounded corner radius, the 
    resulting CSS will be an equivalent border-radius value.

3. Background Color and Opacity: Fill a shape with a color and it will be applied in   
    your CSS as well.

SCREENSHOTS :

Below are some screenshots of the plugin.