File: style.css

Recommend this page to a friend!
  Classes of Suresh Kumar   JavaScript Analog Clock jQuery Widget   style.css   Download  
File: style.css
Role: Auxiliary data
Content type: text/plain
Description: clock style
Class: JavaScript Analog Clock jQuery Widget
Use CSS rotate the pointers of an analog clock
Author: By
Last change:
Date: 9 years ago
Size: 1,469 bytes
 

Contents

Class file image Download 
.clock-circle {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  position: relative;
  border: 8px solid #fff;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 8px rgba(34, 34, 34, 0.3),inset 0 1px 8px rgba(34, 34, 34, 0.3);
  box-shadow: 0 1px 8px rgba(34, 34, 34, 0.3),inset 0 1px 8px rgba(34, 34, 34, 0.3);
  background: #4527A0;
}
.clock-face {
  width: 100%;
  height: 100%;
}
.clock-hour{
  width:0;
  height:0;
  position:absolute;
  top:50%;
  left:50%;
  margin:-4px 0 -4px -25%;
  padding:4px 0 4px 25%;
  background:#fff;
  -webkit-transform-origin:100% 50%;
  -ms-transform-origin:100% 50%;
  transform-origin:100% 50%;
  border-radius:4px 0 0 4px;
}
.clock-minute{
  width:0;
  height:0;
  position:absolute;
  top:50%;
  left:50%;
  margin:-40% -3px 0;
  padding:40% 3px 0;
  background:#fff;
  -webkit-transform-origin:50% 100%;
  -ms-transform-origin:50% 100%;
  transform-origin:50% 100%;
  border-radius:3px 3px 0 0;
}
.clock-second{
  width:0;
  height:0;
  position:absolute;
  top:50%;
  left:50%;
  margin:-40% -1px 0 0;
  padding:40% 1px 0;
  background:#fff;
  -webkit-transform-origin:50% 100%;
  -ms-transform-origin:50% 100%;
  transform-origin:50% 100%;
}
.clock-face:after {
    position:absolute;
    top:50%;
    left:50%;
    width:12px;
    height:12px;
    margin:-6px 0 0 -6px;
    background:#fff;
    border-radius:6px;
    content:"";
    display:block;
}