CSS Hat: Turn Photoshop Layers Into CSS3 Code With a Click

Time’s a very limited resource, and most of us are looking for ways to share extra minutes off our work whenever we can. Whether it’s with a text-expanding app, a web app, or a snippet library, there’s tons of ways software can speed you up, and it’s always great to find new ways to make your computer help you save time.

More often than not, though, these solutions are all over the place, and while they offer a speedy way to get the results you want, they aren’t very intuitive. For example, there are plenty of web apps out there that allow you to get CSS3 gradients, but in order to get exactly what you want, some require you to edit the code after you’ve mess around with its interface. So, wouldn’t it be cool if you could do it all from one application that you are already using? Wouldn’t it be cool to get almost-perfect results?

Of course it would. That’s why we were excited about CSS Hat. CSS Hat is not an app or a web app, but rather a Photoshop extension that’ll help you concentrate in your code and design rather than worry about vendor prefixes and RGBA vs HEX or the like. We don’t usually review Photoshop extensions, but since many of our readers use Photoshop and need an easier way to make CSS on their Macs, we thought you’d enjoy seeing our thoughts on our review copy of CSS Hat.

The CSS Hat Mission

CSS Hat

CSS Hat inside Photoshop

So what does CSS Hat do exactly? Well, in a few words, CSS Hat turns Photoshop layer styles into CSS that you can then paste into your editor of choice. That’s all. No, really, that is pretty much what it does, but it does a masterful job at it.

See, when install CSS Hat, you can open any PSD file and select a layer that contains some styles. CSS Hat will then display CSS it generates based on the styles in that layer. CSS Hat also allows you to turn on and off comments, width and height of the object, vendor prefixes, and other useful things.

CSS Hat

Copy your code and tweak settings to get just what you want

Ultimately, CSS Hat’s mission is to save you time and hassle, and without a shadow of a doubt, it does that. There is no need to mess around with web apps in order to get the exact gradient you wanted, convert HEX to RGBA, or try to remember how to make a circle with pure CSS. All of these things are taken care of for you by CSS Hat. The best part of using CSS Hat, however, is that if you’re already used to using Photoshop, there’s absolutely zero learning curve to using CSS Hat.

The Uses of CSS Hat

But, how useful can this little tool really be? Quite useful, actually. Let’s forget about how great it is for saving time and helping you create beautiful elements; that’s an obvious benefit of the app if you spend your days creating CSS. No, even if you didn’t use it for actual design work, it could still be insanely useful as a learning tool. Think about it: if you’re a designer who knows nothing about development or CSS but you’d like to learn, CSS Hat can help you learn CSS as you create your awesome mockups. As you make buttons and layouts, you’ll have a CSS reference to each of those pieces. Cool, right?

The Downsides of CSS Hat

CSS Hat

From Photoshop to your browser, all in pure CSS

Sadly CSS Hat is not perfect, but most of it is not CSS Hat’s fault. For instance, there are a few styles that CSS Hat can’t convert to CSS. This is due to the fact that either there is no way to translate that Photoshop style into CSS, or that there is no CSS property that allows you to do what that style is doing.

CSS Hat

If only CSS could do everything Photoshop can…

It is a little upsetting that sometimes you won’t get exactly what you want, but at the end of the day, you can’t really blame CSS Hat; however, there are a few things that CSS Hat should mend, such as their gradient support. Gradients are transformed into CSS by CSS Hat with percentages, degrees, and HEX. This is fine, but some of us want RGBA, and pixels. It would be awesome to see an option that would allow us to pick which format we want of CSS gradients we want.

Also, when CSS Hat is open and you try to double click on a layer to rename it, you won’t be able to. Once you close CSS Hat, you’ll be able to rename it again. A little bug perhaps, but nothing huge.

The CSS

So, how accurate is it, you ask. Good question. Turns out, CSS Hat is pretty accurate. Let’s take a look at the code below.

CSS Hat

Some CSS Hat-generated CSS code

As you can see, this is a simple button that CSS Hat was able to make from a rounded rectangle with a few styles. In it, you can see width and height, border radius, background(s), box shadow, comments, and even background clips which prevent background colors from leaking outside of the border. The only thing absent in this code was the stroke style. This is due to the fact that CSS Hat can’t handle gradient-filled borders — fear not though, borders with solid colors are good to go.

CSS Hat

Our test Photoshop design rendered in CSS in Safari

Verdict

It is hard to not recommend CSS Hat to those who work in the web design field. CSS Hat is a powerful time saver, and a powerful learning tool for those out there who lack CSS knowledge. With features like SASS and LESS support and more coming in future updates, CSS Hat is a must for those out there who want to accelerate their workflow. It’s also 30% off at the moment, so if you are interested, now may be the time to grab a copy.

If you give it a try, we’d love to hear your thoughts about how CSS Hat helps out your web development workflow!


Summary

CSS Hat turns Photoshop layer styles to CSS3 with a click.

9
  • B30

    That sounds so cool, I HAVE to try this one!

  • http://techinch.com/ Matthew Guay

    And of all things, a web service made the rounds today that does something very similar: http://www.markupwand.com/

  • http://kukac7.hu kukac7

    another plugin:
    http://css3ps.com

    • Luis

      Nice one!

  • Juc

    Newbie question – “CSS Hat turns Photoshop layer styles into CSS” – what is the point of doing this? I can save the psd layer as a jpeg etc and load the jpeg from the css so what is the point of converting the layer to css??

    Thanks

    • ondras28

      It is export to CSS3, so when you create e.g. rounded box button with inner gradient and shadow, you can use the plugin to generate pure CSS3 code describing the button. (totally without any image file)

    • James

      The way you described is not a good way to do things. Saving a psd to a jpg creates a flat image that is not dynamic. What that means is that you can’t easily change the way it looks without going into photoshop and creating a new jpg. Furthermore, the jpg is much larger than it needs to be. Nowadays we can create many effects that used to have to be done through images, with CSS. This results in a MUCH smaller footprint – CSS code is MUCH smaller than an image. So your pages will load faster, especially on mobile. Also, CSS can scale, unlike an image. So your nice effect can be just as sharp on a hi-res screen (retina iPhone, rMBP, etc) without the need for a second set of @2x images.

  • Juc

    @ James, ok thank you. So would you still use images in some cases or always try to avoid them? Some background images are very small eg http://www.nattywp.com/images/content-bg.jpg and http://www.nattywp.com/images/top-body-bg.jpg = 1KB. So is CSS still better for this kind of thing?

    Thanks

    • http://www.danielmcclintock.com Daniel McClintock

      Juc, with the increasing popularity of responsive design and mobile users (most of my clients’ site traffic consists of 40%+ mobile traffic), minimizing the number of images needed in a design is crucial – even the smallest background image is another object that has to be loaded. With CSS (and now SASS), a minified css stylesheet can accomplish nearly everything with just a few lines of code.

      An even more important reason to eliminate the use of jpg/gif images in site designs is for retina-ready design. Unless your image is an SVG (put simply, a web-version of a vector image) – which is output in html as code, not an actual image file, anyways – old school raster images will limit your ability to cater towards hi-def retina displays, causing inferior results in the quality. Due to the fact that raster images, such as jpgs, have overlap across pixels, they appear fuzzy and lower quality on a retina display unlike svg or css-generated styles which are “pixel-locked” and maintain their integrity regardless of the size at which it is displayed.

      Also, many of the struggles web developers faced a decade ago (rounded corners, shadows, lossless images/icons, hover effects, sprites, transitions, etc) are becoming everyday uses of CSS3, and within the next year I expect will be fully supported across all browsers.

      Images are still necessary in some elements of web design, but many of their uses 5 years ago are now considered deprecated by most bleeding edge development techniques (soon to become standards) and will limit you in your ability to keep your work both semantic and capable of adapting trends which allow us to employ cross-browser, multi-device, and hi-res code to achieve a higher standard of web development. Check out CSS4 over at SmashingMagazine if you haven’t heard of it yet, will give you a good glimpse into the effective evolution CSS is having. http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/

      Regarding this app, though I am a css purist and hardcode 99% by hand (mostly due to pride in my work, and the fact that most of my clients employ me specifically for a completely custom detail-centric finished product), one point that stands out to me is the ability to archive previously created “snippets” of elements already created for quick use later. Besides, if the end result is semantically correct and the same as hard coding, but it saves a significant amount of time, I’ll jump at it. Productivity, at the end of the day, is the #1 necessity for freelancers to run a successful operation.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow