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.