Slicing your
Photoshop layers to web elements is indeed tiring. And if you aim to translate all those Photoshop layer effects into
CSS,
it could be even more tedious. “What CSS properties should I use to
replicate these effects?” and “What vendor prefix to include?” would
probably be some of the questions that might pop-up in your mind during
the process.
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.
The Features
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.
CSS Hat uses Compass to generate CSS3 mixins for SCSS or Sass.
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 into
width
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.
Conclusion
Great products rarely come for free; currently CSS Hat is priced at
$29.99. Furthermore, CSS Hat could run both on
Windows and
Mac, but you need
Photoshop CS4 and above to be able to use this plugin. If you are still running on CS3, perhaps it is time for you to make an upgrade.
No comments:
Post a Comment