CSS Hat: A Magic Button That Turns Photoshop Styles Into CSS

by on 13th June 2012 with 13 Comments

screenshot

Taking a design from Photoshop to the web in a click is not even a remotely new idea. For as long as there have been “web designers” there has been the dream of such a workflow. Today we’re going to look at yet another tool that makes this promise: CSS Hat.

CSS Hat is different than other apps that you’ve seen though. It’s not a full blown WYSIWYG aimed at allowing you to build an entire site without writing code, rather it’s a way to bust out a few quick CSS3 styles on a single element using the process that you’ve used for the past decade or more, right in Photoshop. Spoiler alert: it’s good. Really good. Read on to see why.

Meet CSS Hat

screenshot

Let’s talk about what CSS Hat is and isn’t. First of all, it’s not a standalone application. Instead, it’s a Photoshop plugin. And I don’t mean one of those huge Photoshop plugins that really feels like a separate app, I mean a very simple panel that really doesn’t have much to it beyond the text-based output.

screenshot

What this means for you is that the learning curve is remarkably low. In fact, it’s practically non-existant if you know your way around Photoshop.

The trick performed by CSS Hat is that it has the ability to look at a layer in Photoshop, analyze its various characteristics and then attempt to duplicate those characteristics with pure CSS. Obviously, it can’t replicate everything, but the range is quite impressive and will suit your needs for most purposes. Here are some of the things that it can successfully handle:

  • Layer Styles: This is where the benefit really lies. Many of Photoshop’s layer styles translate remarkably well to CSS (not all, but many). Some examples of supported styles include shadows, glows, and gradient overlays.
  • Rounded Corners: If you draw a vector shape with a rounded corner radius, the resulting CSS will use an equivalent border-radius value.
  • Background Color and Opacity: Fill a shape with a color and it will be applied in your CSS as well.
  • Typography Styles: Not so fast. Apparently this feature is coming, but hasn’t been implemented yet. Layer styles, fills, etc. still work but not any font-related properties.

Tip: To get a feel for what it would be like to use Photoshop to generate CSS, check out the free web app Layer Styles. It’s no where near as slick as CSS Hat, but it’s a fun little alternative.

But I Hate WYSIWYGs!

I know, I know, you hate Dreamweaver and any other app that tries to downplay the coding aspect of building websites. I’m right there with you. I code sites by hand and enjoy doing it that way so you can rest assured that I’m not leading you down a path that will dull your coding chops and produce horrendous output.

CSS Hat isn’t a way for non-coders to cheat and build a good looking website with a crappy code base. In fact, it’s obvious that CSS Hat is in fact a utility for coders, not non-coders. If you’re going to use it effectively, you need to have a strong grasp of CSS: what’s possible, how it’s implemented and how different properties are applied across browsers.

Sure, CSS Hat is going to do a lot of the work for you with code generation, but it merely provides you with a tiny piece of the massive puzzle that is a website and it’s up to you to integrate that piece properly.

So why bother? It’s a valid question. I believe the answer lies in the undeniable fact that CSS3, for all of its amazing abilities, is bulky as hell. It takes a lot of code to achieve even simple results and if you can use a tool that will reduce your time investment while generating code that’s virtually identical to what you would write by hand, why not use it?

Let’s Try It!

I’m always super skeptical of tools like this, but after seeing some of the samples that CSS Hat was able to dish out, I was eager to give it a try myself. To start, let’s build a basic button in Photoshop and see how CSS Hat handles the task.

The process here is basically exactly like the one you would always take to build a button in Photoshop. I’ll begin by drawing a box with a 10px corner radius.

screenshot

Next, we’ll add in a gradient overlay, starting from #009ced and ending at #0065bd.

screenshot

Now we’ll look to an inner shadow to provide a subtle highlight at the top.

screenshot

Let’s speed things along here and jump forward to the finished button. Basically, from here I added a darkened inner glow (works more like an inner shadow), a single pixel stroke and a drop shadow. Keep in mind that even though this all takes a while to explain, it’s really only a minute or less of Photoshop work.

screenshot

Go Go Gadget CSS Hat!

Now that we’ve got the button the way we want it, all we have to do is open our CSS Hat panel and we’ll find a big chunk of code waiting to be copied over.

screenshot

Before we proceed to see what this looks like in the browser, let’s make the output even better. Along the bottom, you’ll see five buttons. The first copies the code to your clipboard and the other four are options that you can turn off and on:

  • Add comments to explain where that particular line comes from.
  • Generate CSS with vendor specific prefixes where necessary.
  • Add the width and height of the selected layer to CSS.
  • Wrap the CSS in a rule named after the layer.

For convenience, I’m going to check all four options and name my layer “.button”. Now I’ll head over to a code editor and paste the resulting code into my CSS:

.button {
  width: 217px;
  height: 70px;
  -moz-border-radius: 10px; /* from vector shape */
  -webkit-border-radius: 10px; /* from vector shape */
  border-radius: 10px; /* from vector shape */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #009ced; /* layer fill content */
  -moz-box-shadow:
    0 3px 4px rgba(7,8,11,.27) /* drop shadow */,
    inset 0 2px 0 rgba(255,255,255,.31) /* inner shadow */,
    inset 0 0 10px rgba(0,101,189,.27) /* inner glow */,
    0 0 0 1px #0271ab /* outer stroke */;
  -webkit-box-shadow:
    0 3px 4px rgba(7,8,11,.27) /* drop shadow */,
    inset 0 2px 0 rgba(255,255,255,.31) /* inner shadow */,
    inset 0 0 10px rgba(0,101,189,.27) /* inner glow */,
    0 0 0 1px #0271ab /* outer stroke */;
  box-shadow:
    0 3px 4px rgba(7,8,11,.27) /* drop shadow */,
    inset 0 2px 0 rgba(255,255,255,.31) /* inner shadow */,
    inset 0 0 10px rgba(0,101,189,.27) /* inner glow */,
    0 0 0 1px #0271ab /* outer stroke */;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDY0YmQiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDljZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient fill */
  background-image: -moz-linear-gradient(90deg, #0064bd 0%, #009ced 100%); /* gradient fill */
  background-image: -o-linear-gradient(90deg, #0064bd 0%, #009ced 100%); /* gradient fill */
  background-image: -webkit-linear-gradient(90deg, #0064bd 0%, #009ced 100%); /* gradient fill */
  background-image: linear-gradient(90deg, #0064bd 0%, #009ced 100%); /* gradient fill */
}

Did It Work?

Now comes the moment of truth, what does the live demo look like compared to the Photoshop version. Here’s your answer:

screenshot

As you can see, they’re certainly not perfectly identical. That being said, they’re pretty dang close and in many ways the CSS version is actually smoother and better looking. In my opinion, it’s an improvement on my Photoshop concept!

There are some caveats of which you need to be aware. Some aspects of Photoshop styles simply can’t translate to CSS at this point in time. For instance, Photoshop adds a blending mode of “Multiply” to drop shadows by default, but this can’t carry over to your CSS.

That being said, there are plenty of advanced possibilities here, and you can easily add to your work with good old fashioned hand coding. The CSS Hat website showcases some really impressive demos that were built with the aid of this awesome tool, such as the one below by musHo.

screenshot

So Much Code!

I already know what some of you are thinking at this point, so let me catch you before you leave a nasty comment. The clear downside of the examples that we see above is that they take so much dang code. However, this isn’t the fault of CSS Hat in the least. The code that it produces is actually nicely organized and as concise as possible.

The truth is, if you want to use images to create these types of effects, then you can easily go that route. These days though, in a world where everything needs to resize to different devices (some of which have stunning screen resolutions), we like to build things with pure code so size and pixelation are never an issue.

In order to do this, we turn to our friend CSS3, which is still very much in a state of flux and therefore requires that we use these huge blocks of redundant code filled with browser prefixes to accomplish anything worth discussing. When you see the huge chunks of code above, if you have an adverse reaction, you’re reacting to the state of web design, not to this specific tool.

The one thing that could be said against tools like CSS Hat is that they make it very easy to forget that you’re really working with code. When you’re writing code by hand, you’re much more conscious of the output and are therefore more apt to be concise, both out of correctness and laziness. Make sure when you’re using any code generator that you always examine the output closely and ask yourself whether the effect is worth the bloat.

What Do You Think of CSS Hat?

After giving it a thorough test drive, I’m blown away by how easy CSS Hat makes it to generate valid, nicely coded CSS using Photoshop. It’s a dream come true for many designers and I think it fully deserves all the hype that it’s getting and more.

If you code a lot of CSS3 styles and happen to love Photoshop, you should definitely think about picking up your copy. It’s $20 right now, which seems like a lot. But you know if Photoshop released these features tomorrow, you’d gladly fork out hundreds of dollars for the upgrade.

Now that you’ve read my spiel, I’d love to hear what you think. Is this an awesome new tool for designers and coders or just a silly toy that’s not to be taken seriously? Rant on!

Comments & Discussion

13 Comments

  • ev0

    UGHHHH they’re mac only right now :( This is such an amazing tool, I honestly had an e-boner when I saw this…now i’m kinda lusting a e-nut.

  • Martin

    WOWAWEEWA!

  • http://siamkreative.com/ SiamKreative

    Looking forward to downloading the Windows version… This looks awesome!

  • Tony Smith

    Joshua, you make a great point when it comes to not being upset with the bloat that comes from the tools but rather how that is a necessity in the industry today. Will there ever be a clean concise standard? Probably not. So I think things like this can be an asset as long as you don’t lose focus on what and why you’re coding in the first place.

  • Joshua Johnson

    Thanks Tony! Fortunately, as more and more of the experimental CSS3 features make the final stage of review in the official spec, we’ll get to drop many of those prefixes and redundant coding practices. Unfortunately though, I’m sure IE will always be there to make sure we still need nasty hacks and extra code!

  • chris

    I think we as developers shouldn’t worry about IE. We should use one activeX detector ‘onload’ and if the browser is IE just pop up a link to chrome frame. I of course, am not brave enough to start that trend.

  • Ted

    Chris, IE has really changed over the years. IE10 is really quite good and even comes with automatic updating.

    I think we as developers should move on from the last decade.

  • http://www.myclientisrich.com/ Eva

    I think we as developers should encorage people to use latest browser versions, no matter which one they prefer.

  • http://jim-silverman.com Jim Silverman

    um. doesn’t fireworks already do this?

  • http://www.jayseventwo.com jayseventwo

    As Jim said above, Fireworks CS6 does this by default, and 5.5 had the ability to download the plugin that CS6 uses.

    Still, as most people seem to use Photoshop, this is a handy addition!

  • http://www.niralsolutions.com Guru

    Hi
    Thanks for your reivew its very usefull we are plaing to implement this in to our company http://www.niralsolutions.com does any one have best tool or easy way to get good result

    Guru

  • http://www.niralsolutions.com Guru

    I am planing to implement this type of tool
    thanks for your comments we are webdevelopers http://www.niralsolutions.com I would appericate if any one suggest best tool for us

    Guru

  • http://www.grid31.com Casey Dennison

    This looks amazing! I love how it’s so simple, and can save a boatload of time when it comes to styling buttons.

Subscribe
Membership
About the Author