Recently, we came across a tool called CSS Hat. It’s a Photoshop plugin that turns your layer effects into CSS3. Let’s take a look at how it works.
As mentioned, CSS Hat translates your Photoshop effects, like Gradient Overlay, Drop Shadow, and Inner/Outer Glow, into standard CSS syntax in only a few clicks.
CSS Hat also supports translation into CSS-Preprocessor syntax like Sass, SCSS, LESS, and Stylus.
One thing to note, however, is that the generated output of LESS code uses LESSHat mixins library, CSS Hat’s sibling. So, to ensure that you can use the output, download the library, and include this line at the top your LESS stylesheet.
- @import "lesshat.less";
Output Option
There are several options included to allow customization of the output. You can add comment to styles generated from the layer effect, include the vendor prefix, translate the layer dimensions intowidth
and height
property, and wrap the style rules in a class selector.Unlike the previously covered CSS3Ps, which generates code output on the Cloud, CSS Hat on the other hand runs the process locally in your machine. To see more how this plugin works in action, watch the following video.
0 comments:
Post a Comment