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.
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
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.
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.
CSS Hat also utilizes Compass to create CSS3 mixins for SCSS or Sass.
The tool offers several customization features. You can add comments to the generated styles, include vendor prefixes, specify layer dimensions as
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.
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.