> Playing with CSS3 gradients

no images were harmed

I’m surprised to see that many mobile web apps still use images for buttons. If you target the Android or iPhone web browser, CSS3 gradients are an extremely powerful resource, not only to make buttons. I spent a couple of hours playing with gradients and masks and here I present you a page stuffed with examples in all their text-only beauty.

It’s time to retire Photoshop and enjoy the raw beauty of the text editor :). CSS3 gradients and masks are so powerful together that the average webapp would never need an image for layout anymore.

I’m not talking about making simple buttons. Mixing multiple gradients, masks, box-shadow and text-shadow you can achieve extremely complex results.

In the demo page I replicated the look and feel of some OS X and Windows7 buttons and a couple of progress bars, all without images. And I just scratched the surface! In the coming days I’ll try to add some more examples.

Maybe it’s too early to go for gradients on desktop browser (*cough*darn IE*cough*), but on iPhone and Android there’s no reason to wait. In fact I’m surprised to see that even Apple uses images for mobile apps (eg: on DashCode).

Since one source-code is worth than a thousand words, please head to the demo page to get a taste of what you can do. The demo works only on Chrome and Safari both desktop and mobile versions, but can be easily ported to Firefox (I’ll do it, promised).

Demo page

/Share the joy

/Reactions