Designers working with both Photoshop layers and CSS files now have an instantaneous way of generating valid code with the click of a mouse.
Adult website developers have a wide range of tools at their disposal for creating the best designs possible. Visually oriented artists often use Adobe Photoshop, for example, to produce their layouts — while other designers go beyond CSS implementation alone — emulating graphics-heavy designs as closely as possible by using lightweight code.
CSS Hat outputs standards-based CSS3 plus optional vendor prefixed properties for all major browsers, and renders gradients into SVG format for Internet Explorer 9.
For those doing it all, CSS Hat (www.csshat.com) is a handy tool that automates the conversion of Photoshop layer files into valid CSS3 coding.
A plugin that is compatible with Adobe Photoshop CS4 (or newer), CSS Hat supports layer properties such as gradient and solid color fills, opacity, layer effects including drop and inner shadows, inner and outer glows, color and gradient overlays, stroke and more.
According to its publisher, CSS Hat saves users hours on each project and “supports your lovely syntax sugar,” working with preprocessors such as LESS, SASS and Stylus.
CSS Hat also provides font properties for text layers, with export of font color and text shadow, width and height, border radius and styling; as well as element pixel sizing, so you won’t have to use a ruler to obtain div and other object dimensions anymore.
CSS Hat outputs standards-based CSS3 plus optional vendor prefixed properties for all major browsers, and renders gradients into SVG format for Internet Explorer 9.
Using it is a snap: Click on a layer that has styles, select CSS Hat from Photoshop’s menu bar, and then view the equivalent CSS3 with a click. Tabs on the display box allow users to choose from CSS, LESS, SCSS, SASS, Stylus and Stylus CSS formatting, while a button click enables users to copy the resulting code to their clipboard for easy pasting.
Blending modes are not allowed, as they are impossible to express in CSS — while effects such as bevel, emboss, satin and pattern overlays, are not currently supported — layers must also not be rasterized; but these limitations do not negate the tool’s value.
Comments can be added to code, CSS rules employed, and syntax highlighting used for more readable files. A money back guarantee makes CSS Hat a $29.99 no-brainer.