I built a replica of the Magic Mouse system preference pane using HTML5 and WebKit CSS extensions. Not a single image is used. You need a developer build of Chrome or WebKit to view the live demo properly.

Demo: http://aupajo.github.com/webkit-fu/mouse-dialog/

Side-by-side comparison screenshot: http://imgur.com/6Kt6L.png

It takes advantage of WebKit-specific CSS gradients, transforms, box-shadows, etc. Not a single image is used. The video is, of course, done with the HTML5 video element.

Code is freely available on GitHub (http://github.com/aupajo/webkit-fu).

Put it together for a weekend BarCamp (http://barcamp.org/BarCamp-Christchurch-2010).

This is a repost from a few days ago, but it went completely under the radar. Seeing a few posts today about the subject, I thought I'd try again.