"Pure CSS Clock"
Bootstrap 3.1.0 Snippet by swapnilchafale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="clock">
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<div id="sh">
<div class="hh">
<div class="h"></div>
</div>
<div class="mm">
<div class="m"></div>
<div class="mr"></div>
</div>
<div class="ss">
<div class="s"></div>
</div>
</div>
<div id="ii">
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
</div>
<div id="e">
<div id="f">
<u>12<u>1<u>2<u>3</u>4</u>5</u></u>
</div>
<div id="g">
<u><u>11<u>10<u>9</u>8</u>7</u>6</u>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#clock {
}
#a {
width:10.0em;
height:10.0em;
position:relative;
border-radius:5.0em;
background:#ccc;/*ccc*/
box-shadow:
inset 0.05em -0.05em 0 #333, /*ccc*/
inset 0.17em -0.17em 0 #555,
inset -0.03em -0.04em 0 #333, /*999*/
inset -0.03em 0.02em 0 #333, /*ccc*/
inset -0.1em -0.1em 0 #555,
0.1em 0.3em 0.2em rgba(0,0,0,0.3);
}
#b {
width:9.4em;
height:9.4em;
top:0.3em;
left:0.3em;
position:relative;
border-radius:4.7em;
background:#fff;
box-shadow:
inset 0.04em 0 0 #fff,
inset 0 -0.06em 0 #ddd,
inset 0.16em -0.08em 0 #222,
inset -0.16em 0.08em 0 #222,
inset 0.2em 0.2em 0 #222,
0.06em -0.03em 0 #999,
-0.1em 0.1em 0 #777,
-0.13em -0.2em 0 #fff,
0.13em 0.2em 0 #222,
0.13em 0.3em 0 #333; /*ccc*/
}
#c {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Hi
I have downloaded the PURE CSS CLOCK Css and HTML file.
Now How i can change the click according to my real time ?

Abdul Hamid Afghan () - 8 years ago - Reply -1


I just noticed it is not in time

Stan Williams () - 7 years ago - Reply 0


So realistic looking!

Stan Williams () - 7 years ago - Reply 0