CSS 3 can to many awesome things with its new features (this blog uses many of them) and I’ve seen a number of examples demonstrating the power of the new standard.

I found myself in a situation recently where I wanted to prototype a theoretical application with a custom chrome which I couldn’t create easily using Inkscape or the Gimp because of all the gradients, rounded corners, shadows, etc I wanted to use. However, CSS3 can do all of these quite easily so I decided to prototype the application as a webpage.

Anyway, this is what I came up with after about an hours work:

The following CSS 3 features are being used here:

• Rounded corners (the window)
• Box shadow (the window)
• Text shadow (h1 title elements)
• Gradients (h1 title elements and on top of the image)
• rgba color (section divs)

I’m also using a custom font (Cantarell) for headers as provided by Google’s font library.

At current only Chrome (and I guess Safari) render this correctly. I’ve tested Firefox but I need to add the correct gradient syntax for it to be 100% correct. I have not been able to test Internet Explorer but I would expect it to explode.

You can find the demo here.