Clock

In this example below you will see how to do a Clock with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by martingrand, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright martingrand ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Clock</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body, html {
  height:100%; width:100%;
  margin:0; padding:0;
}
body {
  background:#dfd8c8;
}
#clock{
  width:200px; height:200px;
  background:#f2f2f4;
  border-radius:13px;
  position:absolute;
  left:50%; top:50%;
  margin:-100px;
  box-shadow:
    0 2px 0 #dfd8c8,
    0 4px 0 #eae4d6,
    0 5px 7px rgba(0,0,0,0.1),    
    0 5px 1px rgba(0,0,0,0.01),
    0 10px 2px rgba(0,0,0,0.01),
    0 15px 3px rgba(0,0,0,0.01),
    0 20px 4px rgba(0,0,0,0.01),
    0 25px 5px rgba(0,0,0,0.01),
    0 30px 6px rgba(0,0,0,0.01),
    0 35px 7px rgba(0,0,0,0.01),
    0 40px 8px rgba(0,0,0,0.01),
    0 45px 9px rgba(0,0,0,0.01),
    0 50px 10px rgba(0,0,0,0.01);   
  background:linear-gradient(#fbfdfa 0%, #f0efed 100%);
}
#clock .decoration {
  position:absolute;
  left:25px; right:25px;
  top:25px; bottom:25px;
  border-radius:3px;
  box-shadow:
    0 2px 0 #f7f6f4,
    0 -2px 0 #fbfbfb,
    inset 0 5px 15px rgba(0,0,0,0.08);
  background:linear-gradient(#e4e3e1 0%, #ebe7e4 100%);
}
#clock .decoration span {
  display:block;
  position:absolute;
  background:#a98c6b;
  box-shadow: 0 0px 2px rgba(0,0,0,0.2);
  margin:-3px;
}
#clock .decoration .top {
  width:6px; height:16px;
  left:50%; top:16px;
}
#clock .decoration .bottom {
  width:6px; height:16px;
  left:50%; bottom:16px;
}
#clock .decoration .left {
  width:16px; height:6px;
  left:16px; bottom:50%;
}
#clock .decoration .right {
  width:16px; height:6px;
  right:16px; bottom:50%;
}

#clock .pointers {
  z-index:2;
}
#clock .pointers span {
  display:block;
  position:absolute;
  z-index:2;
  width:100%; height:100%;
}
#clock .pointers span:after {
  display:block;
  position:absolute;
  content:'';
  background:#26231e;
  width:100px; height:4px;
  left:100px; top:100px;
  border-radius:10px;
}
#clock .pointers .houre:after {
  width:45px; height:6px;
  margin:-3px 0 0 -10px;
}
#clock .pointers .minute:after {
  width:68px; height:4px;
  margin:-2px 0 0 -12px;
}
#clock .pointers .second:after {
  width:73px; height:2px;
  margin:-1px 0 0 -20px;
  background:#ea593c;
}
#clock .pointers .second:before {
  position:absolute;
  content:'';
  border-radius:10px;
  width:6px; height:6px;
  margin:-3px;
  left:50%; top:50%;
  background:#ea593c;
}
#clock .pointers.shadow {
  margin-top:4px;
  z-index:1;
}
#clock .pointers.shadow span {
  z-index:1;
}
#clock .pointers.shadow > span:after,
#clock .pointers.shadow > span:before {
  background:#000 !important;
  opacity:0.33;
  filter: blur(1px);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
}

#clock.aminate .pointers span {
   transition:transform 1s ease;  
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div id="clock">
  <div class="pointers">
    <span class="houre"></span>
    <span class="minute"></span>
    <span class="second"></span>    
  </div>
  <div class="pointers shadow">
    <span class="houre"></span>
    <span class="minute"></span>
    <span class="second"></span>    
  </div>
  <div class="decoration">
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="right"></span>
    <span class="left"></span>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/martingrand/clock-aAldc */
body, html {
  height:100%; width:100%;
  margin:0; padding:0;
}
body {
  background:#dfd8c8;
}
#clock{
  width:200px; height:200px;
  background:#f2f2f4;
  border-radius:13px;
  position:absolute;
  left:50%; top:50%;
  margin:-100px;
  box-shadow:
    0 2px 0 #dfd8c8,
    0 4px 0 #eae4d6,
    0 5px 7px rgba(0,0,0,0.1),    
    0 5px 1px rgba(0,0,0,0.01),
    0 10px 2px rgba(0,0,0,0.01),
    0 15px 3px rgba(0,0,0,0.01),
    0 20px 4px rgba(0,0,0,0.01),
    0 25px 5px rgba(0,0,0,0.01),
    0 30px 6px rgba(0,0,0,0.01),
    0 35px 7px rgba(0,0,0,0.01),
    0 40px 8px rgba(0,0,0,0.01),
    0 45px 9px rgba(0,0,0,0.01),
    0 50px 10px rgba(0,0,0,0.01);   
  background:linear-gradient(#fbfdfa 0%, #f0efed 100%);
}
#clock .decoration {
  position:absolute;
  left:25px; right:25px;
  top:25px; bottom:25px;
  border-radius:3px;
  box-shadow:
    0 2px 0 #f7f6f4,
    0 -2px 0 #fbfbfb,
    inset 0 5px 15px rgba(0,0,0,0.08);
  background:linear-gradient(#e4e3e1 0%, #ebe7e4 100%);
}
#clock .decoration span {
  display:block;
  position:absolute;
  background:#a98c6b;
  box-shadow: 0 0px 2px rgba(0,0,0,0.2);
  margin:-3px;
}
#clock .decoration .top {
  width:6px; height:16px;
  left:50%; top:16px;
}
#clock .decoration .bottom {
  width:6px; height:16px;
  left:50%; bottom:16px;
}
#clock .decoration .left {
  width:16px; height:6px;
  left:16px; bottom:50%;
}
#clock .decoration .right {
  width:16px; height:6px;
  right:16px; bottom:50%;
}

#clock .pointers {
  z-index:2;
}
#clock .pointers span {
  display:block;
  position:absolute;
  z-index:2;
  width:100%; height:100%;
}
#clock .pointers span:after {
  display:block;
  position:absolute;
  content:'';
  background:#26231e;
  width:100px; height:4px;
  left:100px; top:100px;
  border-radius:10px;
}
#clock .pointers .houre:after {
  width:45px; height:6px;
  margin:-3px 0 0 -10px;
}
#clock .pointers .minute:after {
  width:68px; height:4px;
  margin:-2px 0 0 -12px;
}
#clock .pointers .second:after {
  width:73px; height:2px;
  margin:-1px 0 0 -20px;
  background:#ea593c;
}
#clock .pointers .second:before {
  position:absolute;
  content:'';
  border-radius:10px;
  width:6px; height:6px;
  margin:-3px;
  left:50%; top:50%;
  background:#ea593c;
}
#clock .pointers.shadow {
  margin-top:4px;
  z-index:1;
}
#clock .pointers.shadow span {
  z-index:1;
}
#clock .pointers.shadow > span:after,
#clock .pointers.shadow > span:before {
  background:#000 !important;
  opacity:0.33;
  filter: blur(1px);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
}

#clock.aminate .pointers span {
   transition:transform 1s ease;  
}

/*Downloaded from https://www.codeseek.co/martingrand/clock-aAldc */
$('.houre, .minute, .second').data('plus-deg', 0)
calcTime();
$('#clock').addClass('aminate');
var int = setInterval(calcTime, 1000);
function calcTime () {
  var d = new Date();
  var h = d.getHours();
  rotate($('.houre'),  ((h > 12 ? h - 12 : h)*30)-90);
  rotate($('.minute'), (d.getMinutes()/*0-59*/*6)-90);
  rotate($('.second'), (d.getSeconds()/*0-59*/*6)-90);
}
function rotate ($object, deg) {
  var original_deg = deg;
  if(deg != $object.data('deg')){
    if(deg == -90) {
      $object.data('plus-deg', $object.data('plus-deg')+360);
    }
    deg += $object.data('plus-deg');
    $object.css({
      '-webkit-transform' : 'rotate('+deg+'deg)',
      '-moz-transform' : 'rotate('+deg+'deg)',  
      '-ms-transform' : 'rotate('+deg+'deg)',  
      '-o-transform' : 'rotate('+deg+'deg)',  
      'transform' : 'rotate('+deg+'deg)',  
      'zoom' : 1
    });
    $object.data('deg', original_deg);
  }
}

Comments