Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

Magically Turn Photoshop Layers Into CSS3 With CSS Hat

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

Today I'm going to show you a Photoshop plugin which aims to greatly improve your workflow. It's called CSS Hat and it turns your Photoshop layers directly into valid CSS3.

Sponsored Content

This is a sponsored review or giveaway of a product/service that's particularly relevant to our readers.


The Screencast


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Further Information

  • Download: You can grab CSS Hat from its homepage.
  • Compatibility: CSS Hat is compatible with Photoshop CS4 and upwards, on Mac OS X and Windows.
  • LESS Hat: A bunch of smart LESS mixins.
  • Prefixes: Forget having to cater for multiple browser vendors, CSS Hat will prefix all your styles for you.
  • CSS Preprocessors: CSS Hat also supports output for SASS, LESS and Stylus.

What Can CSS Hat do?

CSS Hat supports the following layer properties:

  • Gradient/Solid color fill layer
  • Drop Shadow
  • Inner Shadow
  • Inner Glow
  • Outer Glow
  • Opacity
  • Gradient Overlay
  • Text Layers
  • Color Overlay
  • Stroke
  • Border Radius
csshat-panel
The panel..
csshat-screenshot-1
The hat..
csshat-screenshot-2
The process..
Advertisement