Settings

Theme

Pure HTML5 + CSS: Replica of a Mac OS X system preference pane

22 points by aupajo 16 years ago · 1 comment · 1 min read


Hello!

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.

whimsy 16 years ago

Very impressive.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection