A beautiful functional watch in HTML5. NO IMAGES

perivision — Mon, 13 Aug 2012 04:18:40 +0000

This is sweet. We have seen some really nice graphics done in pure CSS. This one I think pushed the HTML/CSS/JS bar just a bit higher. A really nice functional wrist watch with no images! The crazy part is that it works in I.E! Wow. I also tested on iPad and iphone. Works.

I did look through the code and see a few lines like the following to make me think some of this was created with a conversion tool, perhaps from a vector graphic, but not sure. Anyone?

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=’#FFFEFEFE’, endColorstr=’#FFFFFFFF’);
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(17%, #dbd9da), color-stop(50%, #0b0d0c), color-stop(51%, #0b0e0c), color-stop(59%, #b0b1b5), color-stop(71%, #aeadbd), color-stop(84%, #cfcfcd), color-stop(100%, #ffffff));

Here is the link to codepin.io, you can grab the code there.

Enjoy!

demo code – As Seen Through PeriVision

A beautiful functional watch in HTML5. NO IMAGES

Share and Enjoy !