Convert CSS to PSD with CSS Hat
Converting your Photoshop layers into web elements can be a daunting task. Especially when you’re trying to turn Photoshop layer effects into CSS, you may find yourself wondering which CSS properties and vendor prefixes to use.
Recently, we discovered a handy Photoshop plugin named CSS Hat. This tool effortlessly converts your layer effects into CSS3. Let’s dive into its functionalities.
Best PSD To HTML Services to Code Your Design
In this Internet world full of business opportunities, having a semantic and user-friendly website is important to the... Read more
Key Features
CSS Hat can quickly turn your Photoshop effects like Gradient Overlay, Drop Shadow, and Inner/Outer Glow into standard CSS code. It’s as simple as a few clicks.
Additionally, CSS Hat supports various CSS-Preprocessor languages such as Sass, SCSS, LESS, and Stylus.
It’s worth mentioning that the LESS code generated relies on the LESSHat mixins library, which is a companion to CSS Hat. To make the output functional, you’ll need to download this library and include the following line at the top of your LESS stylesheet.
@import "lesshat.less";
CSS Hat also utilizes Compass to create CSS3 mixins for SCSS or Sass.
Customization Options
The tool offers several customization features. You can add comments to the generated styles, include vendor prefixes, specify layer dimensions as width and height properties, and even wrap the style rules within a class selector.
Unlike CSS3Ps, which processes code in the Cloud, CSS Hat performs all operations locally on your computer. For a live demonstration, check out the video below.
Final Thoughts
Quality often comes at a price, and CSS Hat is no exception with a price tag of $29.99. The plugin is compatible with both Windows and Mac operating systems, but it requires Photoshop CS4 or newer. If you’re still using CS3, it might be time to consider an upgrade.