I have to admit, I wasn’t expecting much when I the clicked “Buy Now” button on the CSS Hat web site. I’ve seen scores of other companies try to address the problem of PSD to CSS conversion, and so far hadn’t found one that put out code that was up to my standards.
But CSS Hat came recommended by the OCWP group, and those folks really know their stuff, so I figured I’d give it a shot. It seemed like it would be worth a $30 gamble if it really did what it said it did.
After trying it out for a bit, all I can say is holy cow, does it deliver! I was able to translate the image-based submit button a client has been using into pure CSS in less than 5 minutes. Sure, I had to tweak a couple of rules and add a couple of others, but all in all, it saved me probably 10 minutes of typing in code, searching CSS Tricks for how that border-clip thing worked again and visiting a CSS3 shadow and gradient generator.
So what is it supposed to do?
I think CSS Hat shows their benefits, the best, so I snagged a screennshot of what features convinced me I needed this tool:
Basically, You’re supposed to click on any layer using layer styles in Photoshop (CS4 or above) and CSS Hat displays the CSS that will translate the effect to the browser. It even has options for LESS, SASS and a few other preprocessors. You can also choose to include comments, vendor-specific prefixes, a fixed width and height and the ability to automatically name the rule based on the name of the layer.
CSS Hat was a breeze to install. You just run the .exe file. I especially liked the personal message on the installer screen ;) Nice touch, guys!
Making my button
To open the CSS Hat window, you’ll need to open Photoshop and go to to Window → Extensions → CSS Hat option. Your new CSS Hat window should now be visible.
Next I opened up the PSD document I created for a client. I wanted to see how easy it would be to convert a Submit button that they’ve been using as a graphic into pure CSS so I can adjust the size more easily.
Next I selected my Move tool, making sure the “Auto Select Layer” option is checked. This will let me select any layer just by clicking on it.
Once you’ve clicked on the layer, look at the CSS Hat window. Bam. All of the CSS you need to re-create the graphic with CSS. I haven’t tried LESS or SASS yet, so I stuck with plain old CSS for my test. I did select the option for browser-specific prefixes, though.
I had to generate CSS for two elements—the button base and the button text. This is the code CSS Hat generated for the button base:
border: 1px solid #f60;<br /> -moz-border-radius: 5px;<br /> -webkit-border-radius: 5px;<br /> border-radius: 5px;<br /> -moz-background-clip: padding;<br /> -webkit-background-clip: padding-box;<br /> background-clip: padding-box;<br /> background-color: #000;<br /> -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);<br /> -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);<br /> box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);<br /> background-image: -moz-linear-gradient(bottom, #ff5400 0%, #ff5400 25%, #fea00f 90.16%, #fea00f 100%);<br /> background-image: -o-linear-gradient(bottom, #ff5400 0%, #ff5400 25%, #fea00f 90.16%, #fea00f 100%);<br /> background-image: -webkit-linear-gradient(bottom, #ff5400 0%, #ff5400 25%, #fea00f 90.16%, #fea00f 100%);<br /> background-image: linear-gradient(bottom, #ff5400 0%, #ff5400 25%, #fea00f 90.16%, #fea00f 100%);<br />
And this is what it generated for the text:
color: #3d3d3d;<br /> font-family: "Myriad Pro";<br /> font-size: 18px;<br /> font-weight: bold;<br /> text-shadow: 0 1px 1px rgba(0,0,0,.75);<br />
I created a quick HTML document to test out the styles. I created a class called “button” with the above CSS attributes and applied it to the following html code:
<a href="#"><div class="button"> Submit »</div>
This is what I got when I previewed the code:
We’re not 100% there, but really, we’re not that far off. The first thing we need to take care of is the fact that the button spans the whole width of the browser. To take care of it, we add the following to our .button rule:
Next I added a little bit of padding. I used my marquee tool and Info panel to determine the padding and added this:
<br /> padding: 8px 25px 9px;
If you measure the button, though, the padding is larger than we’ve set it. That’s where Bill Erickson’s Most Useful Code Snippet Ever (™ me) comes in handy. This little nugget of awesomeness keeps box elements from adding padding and borders to the overall width of a box.
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
Our button base is ready to go now!
The button text
The last thing to fix are two minor elements of the button text. First, the color is obviously wrong. It’s easy to change the color from
To make sure there was equal padding around the text, I also added
Finally, because CSS Hat can’t generate CSS based on blend modes, I need to change the color of my text shadow. I simply used my eyedropper tool to select the red-orange I wanted, noted the RGB values in Photoshop, and changed
text-shadow: 0 1px 1px rgba(0,0,0,.75);
text-shadow: 0 1px 1px rgba(255,42,3,.75);
Here are our two buttons side by side.
If anything, I think the pure CSS button looks cleaner than the graphic. And when I want a nice, huge CTA button, I can swap a font size and padding values instead of creating a brand new graphic. I’ll definitely go in and add Typekit so I can use the correct Myriad Pro font and give it a little bit of typographic love, but otherwise, I’m a pretty happy camper.
In short, CSS Hat did exactly what it said it would do, simply and elegantly. It doesn’t try to do too much–either. It’s intuitive and is one of those rare tools that gets out of the way and does what it’s supposed to. I have a feeling that this is going to become a huge workhorse in my development cycle.