24 Feb

Pure HTML Clocks using Javascript & CSS Rotation

Calendar, License Free

Leave a Comment

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.

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

Sponsors

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.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers