View code

< Back
Studio Saus

CSS Clock

CSS3 Clock
Design clock by Shaun Cronin
Clock jQuery tutorial by Alessio Atzeni

  • :
  • 00
  • :
  • 00

/* CSS */ 
/*Design clock by http://dribbble.com/shots/741543-Digital-Clock-Display*/
/*Clock made with CSS3 gradients and shadows*/

.canvas-wrap{width:400px;height:300px;background:#fff;margin:0 auto;-webkit-border-radius:3px; padding:20px;-moz-border-radius:3px; border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.07);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);box-shadow:0 1px 2px rgba(0, 0, 0, 0.07)}/*Dribbble styles*/
.canvas-con{width:300px;height:200px;background:#ebe6d7;padding:50px;overflow:hidden}/*center clock*/

.top-light{ height:900px; width:400px; margin:-700px 0 0 -50px; z-index:-99; background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-radial-gradient(center,ellipse cover,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(255,255,255,0.6)),color-stop(100%,rgba(255,255,255,0)));background:-webkit-radial-gradient(center,ellipse cover,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%);background:radial-gradient(ellipse at center,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#0ffff',GradientType=1 )}

.clock-con { width: 200px;height:200px;-moz-border-radius:100px;-webkit-border-radius:100px; border-radius:100px; background:#ebe7dc;margin:0 auto;-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.6), 0px 8px 10px 0px rgba(0, 0, 0, 0.3), 0px 4px 6px 0px rgba(0, 0, 0, 0.3), inset 0px 3px 6px 0px rgba(255, 255, 255, 0.4);box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.6), 0px 8px 10px 0px rgba(0, 0, 0, 0.3), 0px 4px 6px 0px rgba(0, 0, 0, 0.3), 2px -9px 12px 0px rgba(255, 255, 255, 0.2), inset 0px 3px 6px 0px rgba(255, 255, 255, 0.4);}
.clock-con .clock-con2{ position:absolute;width:180px;height:180px;-moz-border-radius:90px;-webkit-border-radius:90px; border-radius:90px; background:#c5bea5;margin:10px; -webkit-box-shadow:inset 0px 3px 10px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 30px 0px rgba(0, 0, 0, 0.1), 0px 2px 0px 0px rgba(255, 255, 255, 0.85), inset 2px -3px 12px 0px rgba(255, 255, 255, 0.6); box-shadow:inset 0px 3px 10px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 30px 0px rgba(0, 0, 0, 0.1), 0px 2px 0px 0px rgba(255, 255, 255, 0.85), inset 2px -3px 12px 0px rgba(255, 255, 255, 0.6);}
.clock-con .clock-con2 .clock-con3{ position:absolute;width:140px;height:140px;-moz-border-radius:70px;-webkit-border-radius:70px; border-radius:70px; background:rgba(0, 0, 0, 0.0);margin:20px; -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.05)
}

.clock-con3::after{content:"";width:140px;height:140px;position:absolute;  border-radius:70px; background:url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuNTMiLz4KICAgIDxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background:-moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.53) 14%,rgba(255,255,255,0) 30%); background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,rgba(255,255,255,1)),color-stop(14%,rgba(255,255,255,0.53)),color-stop(30%,rgba(255,255,255,0))); background:-webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.53) 14%,rgba(255,255,255,0) 30%); background:-o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.53) 14%,rgba(255,255,255,0) 30%); background:-ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.53) 14%,rgba(255,255,255,0) 30%); background:linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.53) 14%,rgba(255,255,255,0) 30%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#0ffff',GradientType=1 )}

.clock-con .clock-text{position:absolute;text-transform:uppercase;color:rgba(0,0,0,0.5); line-height:190px;/*vertical align font*/width:180px;text-align:center}
.clock-con .clock-text li{display:inline; font-size:4.6em; font-family:'digital-7mono'; z-index:90; text-shadow:0px 0px 1px rgba(0,0,0,0.3)}
.clock-con .clock-text2{position:absolute; text-transform:uppercase; color:rgba(0,0,0,0.04); line-height:190px;/* vertical align font */width:180px; text-align:center}
.clock-con .clock-text2 li{display:inline; font-size:4.6em; font-family:'digital-7mono'; z-index:80; text-shadow:0px 0px 3px rgba(0,0,0,0.06)}

/*Jquery Clock tutorial by http://www.alessioatzeni.com/blog/css3-digital-clock-with-jquery/*/
#point{position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; margin:0px -8px; top:-5px}
#point2{position:relative; margin:0 -8px; top:-5px}

/*Simple ":" Animation*/
@-webkit-keyframes mymove 
{
0% {opacity:1.0;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0;  }	
}

@-moz-keyframes mymove 
{
0% {opacity:1.0;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; }	
}
/* font "digital-7mono" by http://www.dailyfreefonts.com/fonts/authors/author-87.html */
@font-face{
 font-family:'digital-7mono'; 
 src:url('digital-7_mono.eot'); 
 src:url('digital-7_mono.eot?#iefix') format('embedded-opentype'),
 url('digital-7_mono.woff') format('woff'),
 url('digital-7_mono.ttf') format('truetype'),
 url('digital-7_mono.svg#digital-7mono') format('svg'); 
 font-weight:normal; 
 font-style:normal}
 
/* HTML */ 
<div class="canvas-wrap"><!--Dribbble style canvas outer border--> 
<div class="canvas-con"><!--Dribbble style canvas inside-->

<div class="clock-con"><!--Outer clock container-->
<div class="clock-con2"><!--Next clock container-->

<ul class="clock-text"><!--Top text layer-->
<li id="hours"></li>
<li id="point">:</li>
<li id="min"></li>
</ul>
 
<ul class="clock-text2"><!--Subtle bottom text layer-->
<li id="hours2">00</li>
<li id="point2">:</li>
<li id="min2">00</li>
</ul>

<div class="clock-con3"><!--Inner clock container-->
</div><!--/clock-con3-->
</div><!--/clock-con2-->
</div><!--/clock-con-->
<div class="top-light"></div><!--Top light effect-->
</div><!--/canvas-con-->
</div><!--/canvas-wrap-->
Saus-footer

© 2010 - Saus

Algemene voorwaarden