WebAppers

/ best free open source web resources /

Shopify

Pure HTML Clocks using Javascript & CSS Rotation

Posted · Category: Calendar, License Free

The two Clocks are pure HTML using JavaScript and CSS rotation. There are no Adobe Flash files or <canvas> going on, just regular <div> and <img> tags. The way it works is by taking those images in an { overflow: hidden } <div> and rotating them, via JavaScript, using the proposed CSS transform property.

However, this isn’t going to work in any currently available version of Internet Explorer or many older browsers. It only works in Google Chrome, Safari and Firefox 3.5+ browsers support the CSS transform property.

css-clock

Requirements: Browsers support CSS transform property
Demo: http://joncom.be/code/css-clocks/
License: License Free

12 Comments
  • http://silence.regnareb.com Regnareb

    They have forget Opera…

  • http://www.entersolutions.co.za Mo

    This script is great and all, but honestly, I’ve never really found the use of having a clock on any site. I have a clock right at the bottom of my screen. Its not taking up any space on my page, and its not slowing down loading time either.

    So why would anyone want to put a clock on their page? Unless its a countdown clock. Then its another thing. That I can still understand.

    Just my thoughts. Thanks for the up though.

  • http://flash-clocks.com Flash Clocks

    I usually create flash clocks for websites and blogs using flash technology, and i also know how to make clocks using javascript with jquery, but css clocks with text rotation i did not know how, thanks for sharing the information.

  • http://fedmich.com/life fedmich

    These kind of clocks are usually useful for intranet applications.
    too bad that this doesnt work on IE or Opera.
    but its good to know techs like this exists.
    Thanks for sharing.

  • http://silence.regnareb.com Regnareb

    It works on Opera, but they just didn’t made this clock compatible with Opera.

  • ivan

    Why would someone go through the trouble of programming a clock that doesn’t work with IE? Just curious.

  • http://www.cssfind.com Sivaranjan

    Fantastic piece of tutorial! I am going to add it to my CSS aggregator website.Hope you dont mind!

  • Pingback: CSSFind

  • http://www.tech-wd.com apple

    ivan : Just curious .. who would use IE now ?

  • Francisco Blanchart

    Please don’t call them PURE when they need something else. Many people come here thinking they’ll get that with just HTML.
    It’s the same as when you say “Pure CSS whatever” and it always needs Javascript or a JS framework.

    Great job, nonetheless and thanks for your chasing and sharing!!

  • http://www.baboon.ir/ baboon-ir

    it s Beautiful flash clocks for websites and blogs

  • http://askmatthewpotter.com Matthew Potter

    I ended up doing a similar thing to that however I only used javascript once in order to set the initial time to the local computer.

    Check it out at: http://goo.gl/JalKa . I have all the source code within the single page. Please also note that I had only built it for webkit due to webkit-keyframes.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons