by designify · in Tutorials · November 8, 2013

How to Create a Simple Clock with CSS only

WebAdviser.io - On Demand Developers & Designers

Post Views: 194

This is a quick and straightforward tutorial showing how to do a simple, great-looking and most of all, pure CSS clock. You do not need any jQuery scripts or whatever to make it work. Have a look below and you will see.

HTML

<div class="clock">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="center"></div>
<div class="shadow"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>

CSS

* {
margin: 0;
padding: 0;
border: 0;
}

html, body {
min-height: 100%;
}

body {
background-color: #00A99E;
}

.clock {
position: relative;
height: 200px;
width: 200px;
background: white;
box-sizing: border-box;
border-radius: 100%;
border: 10px solid #67D2C8;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
.top {
position: absolute;
width: 3px;
height: 8px;
background: #262626;
left: 0;
right: 0;
margin: 0 auto;
}
.right {
position: absolute;
width: 8px;
height: 3px;
background: #262626;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
}
.bottom {
position: absolute;
width: 3px;
height: 8px;
background: #262626;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.left {
position: absolute;
width: 8px;
height: 3px;
background: #262626;
top: 0;
bottom: 0;
left: 0;
margin: auto 0;
}
.center {
height: 6px;
width: 6px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #262626;
border-radius: 100%;
}
.shadow {
height: 200px;
width: 200px;
position: absolute;
left: 60px;
top: 60px;
transform: rotate(135deg);
background: linear-gradient(transparent, rgba(#000, 0.1));
}
.hour {
width: 3px;
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
animation: time 86400s infinite linear;
&:before {
position: absolute;
content: "";
background: #262626;
height: 60px;
width: 3px;
top: 30px;
}
}
.minute {
width: 1px;
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
animation: time 3600s infinite linear;
&:before {
position: absolute;
content: "";
background: #262626;
height: 40px;
width: 1px;
top: 50px;
}
}
.second {
width: 2px;
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
animation: time 60s infinite linear;
&:before {
position: absolute;
content: "";
background: #fd1111;
height: 45px;
width: 2px;
top: 45px;
}
}
}

@keyframes time {
to {
transform: rotate(360deg);
}
}