How to Get High Resolution Screenshots of a Website

I’m working on a brochure for cofamilies.com (a web app I’m designing) and we want to highlight some screenshots from the app. Problem is, taking a screenshot doesn’t give you print quality graphics. So how do you get a high resolution image from a website? I found a cool way to solve this problem and so I decided to put together a screencast to show you what I came up with.

CSS3 Unexpected Goodness

When I designed this site, I used CSS3 instead of images for all my gradients, box shadows, and other effects. I had no idea that it would help me taking the design to print. CSS3 is loaded with unexpected goodness and if you’re not using it, you’re missing out.

Just so you know, in the video the gradients appear to be a little blocky, they are actually quite smooth and that’s just a result of the video compression. Here’s an uncompressed screenshot to prove it.

If you have a better way of doing this, I’d love to hear about it. Also, If you find this helpful let me know.