Home / Tutorials / Crate Analog Clock using CSS3 only without image
analog-clock

Crate Analog Clock using CSS3 only without image

View Demo

Analog clock without images? yes, Today we are going to create analog clock using CSS3, Javascript and no images. It seems little bit difficult but we will do it easily. all 3 sticks, center point, circle, hours and minute indicates are designed using css. So lets see how we can do this:

Base

So first we’ll start with drawing few circles. There will be 3 circles to draw clock base design. So lets look at the first one:

So here we creating a div with such a huge border radius that it renders as circle then with the help of Colorzilla Gradient Editor We’ve created a simple gradient going from light to dark to light brown. I played around with the width and height, padding and border-radius values until I got something that I was happy with. You could probably do it more scientifically than me but that’s not the way I roll.
So that gave me one circle with a gradient now I needed another slightly smaller, slightly darker gradient to fit inside the first one.

Next the clock face. Same idea just different colour obviously. You can play with the gradients and colours yourselves ( I messed around for ages until I was happy with the results).

Now for the minute markers. So we have to place the first marker at 12 o clock then rotate a little and place at the next minute and so on all the way round the clock. Before we get into the maths of this lets look at the most crucial part of this…. How to rotate the elements around the centre of the clock. Luckily there is a simple CSS3 property called translate-origin the only thing with this property is that it needs the browser specific prefix to work. Another tricky part is the rotation point, which is relative the element you are rotating so I placed the elements then took the file to the browser and used measureit plugin to see how far it was from the top of the element to the centre of the clock. Now for a bit of Maths (not my strong point) to work out how far to rotate each minute marker. So there’s 360 degrees in a circle and 60 minutes in the hour, so 360 / 60 = 6. So every minute marker has to be rotated 6 degrees and every 5 minutes or hour marker is 30 degrees (5 x 6).

As you can see I’ve created a two classes .mins and .fiveMins and done all the basic styling for the elements then I created unique ID’s for every minute marker (yes 60) and put the correct rotation on the element. So for the first and second minute markers are as follows:

Telling the time.

So now we just need the hands on the clock and we’ve cracked it. So first the hour hand

Here you can see I have set the position absolutely set it to have curved edges and the most important part I have set the transform origin to the centre of the clock again using the same method as before. I do the same for the minute hand and the second hand and then finally place a small circle in the centre of the clock above all the other divs.

Javascript to update time

Now we will code javascript to update time on the clock.

So finally your clock is ready!
Isn’t it nice?

About cmadmin

Web Developer & Designer | Android App Developer

Check Also

Top Useful CSS Snippets – Every Designer Should Know

With so many new trends advancing every year it can be difficult keeping up with …

css3-media-queries

Media Queries for Standard Devices

A major component of responsive design is creating the right experience for the right device. …

Login


Username
Create an Account!
Password
Forgot Password? (close)

Sign Up


Username
Email
Password
Confirm Password
Want to Login? (close)

Forget Password?


Username or Email
(close)
%d bloggers like this:
SHARE
OR
SUBSCRIBE
To get latest new / tutorial / technology / development information subscribe with us.
ARE YOU READY? GET IT NOW!
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !
OR SUBSCRIBE WITH