Grow your CSS skills. Land your dream job.

CSS3 and jQuery Clock face – Safari only!

  • # November 3, 2008 at 9:13 am

    Hi all,

    Just having a bit of fun really. I think this might be the first real CSS driven clock face.

    I’ve been mucking around with -webkit-transform: rotate and came up with this idea for the clock. It’s Safari only ( the lastest release ) as it’s the only one I know that supports the Rotate feature in CSS3.

    I’ve used jQuery to get the date/time info and translate that into an angle in degrees for each clock hand before injecting the webkit CSS3 style info. It even validates as CSS2.1!!!

    Like I said just a bit of fun but turned out ok I think.

    Toby

    Get the time here ( London time only, sorry! ;) )

    CSS Clock

    # November 3, 2008 at 10:19 am

    Hey toby,

    Pretty killer demo / proof of concept! (again!) Maybe this would be another cool demo tutorial?

    # July 7, 2009 at 5:31 am

    Hi Toby,

    Very good idea, I feel very sad it don’t work in Firefox and IE. So, I add jquery plugin for it.

    Now, Old School Clock can tick in Firefox or IE.
    [attachment=0]jquery.schoolclock.zip[/attachment]

    Jacko Chang
    jacko.chang at vivotek.com

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".