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).
You are right. Fantastic Demo! Nothing else.
That, my friends, is pretty amazing.
Wow i’ve looked into CSS3 before but these are the most advanced demos i’ve seen!
Such a shame it’s restricted to WebKit only. Using cross-browser properties (e.g. border-radius and -moz-border-radius) would open it up to Firefox, Opera and IE9 users as well. Even if some properties such as gradients are not supported in all browsers at the time of writing, you would future-proof your work and the properties that are currently supported would at least make the designs look better than the squares we see at the moment.
it’s just a proof of concept. to the diligent reader the assignment to add cross browser compatibility
I think firefox can be easily added.
Gradients are available for Firefox as well, and their implementation is much closer to what will become the final spec.
Ergo: If you want to demonstrate gradients and do not have the time to make it as X-browser as possible, ditch Webkit and use the Fox! In that way your code won’t be as obsolete.
I’m mostly devoted to mobile webdev on iphone/ipad/android (as you can read from the article). Not much interested in desktop cross browser compatibility.