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!

Leave a Reply

Your email address will not be published. Required fields are marked *