A Pen by Kaushalya Mandaliya.

Clock-in-Pure-CSS.markdown

Clock in Pure CSS

Inspiring shot

A Pen by Kaushalya Mandaliya on CodePen.

License.

index.html

<div id="container">
  <div id="clock">
    <div class="second-hand"></div> 
  </div>     
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
    <div class="box-4"></div>
    <div class="box-5"></div>
    <div class="box-6"></div>
    <div class="box-7"></div>
    <div class="box-8"></div>
    <div class="box-9"></div>
    <div class="box-10"></div>
    <div class="box-11"></div>
    <div class="box-12"></div>
</div>


<a href="http://seebeetee.com" class="seebeetee">SeeBeeTee</a>

<a href="https://dribbble.com/shots/1601591-Clock" class="inspired-by">Inspired by This Dribbble shot.</a>

script.js

/*
** Clock in Pure CSS :D
** Not one div 
** 2014 by Kaushalya Mandaliya. @kmandalwala
** http://seebeetee.com
*/

style.scss

@import "compass/css3";
$size: 13em;
$size-of-box: 4.55em;

body {
  background: darken(#8CAECA, 10%);
  font-family: 'Raleway', sans-serif;
}

#container {
  height: $size;
  width: $size;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  margin: auto;
  
  zoom: 1.2;
}

#clock {
  background: #eee;
  border: 1em solid #eee;
  width: $size;
  height: $size;
  @include border-radius(100%);
  @include box-shadow(inset 0 0 0 5.5em #2C95EB, 0 0 1.4em 0.5em rgba(white, 0.4));
  margin: -0.9em -0.4em;
  
  .second-hand {
    background: #C7A5D2;
    width: 0.15em;
    height: 5em;
    position: absolute;
    margin: 6.3em 3.8em;
    
    @include transform(rotate(45deg));
    @include box-shadow(0.1em 0 0 0.03em rgba(red, 0.5))
  }
 
  &:before {
    content: '';
    background: #eee;
    height: 5.5em;
    width: 0.7em;
    position: absolute;
    margin: 0.5em 6.1em;
    
    @include border-radius(1em 1em 0 0);
  }
  
  
  &:after {
    content: '';
    background: #eee;
    height: 0.7em;
    width: 4.7em;
    position: absolute;
    margin: 6.2em 6.9em;
    
    @include border-radius(0 1em 1em 0);
  }
}


.box-1 {
  background: #EB97B7;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  margin: -2em;
  z-index: -1;
  
  @include border-radius(0 0 0 2em);
}

.box-2 {
  background: #EBDCBF;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  margin: -2em 2.55em;
  z-index: -1;
}

.box-3 {
  background: #EB9BB9;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  margin: -2em 2.55em * 2.8;
  z-index: -1;
}

.box-4 {
  background: #1896FB;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  margin: -2em 2.55em * 4.6;
  z-index: -1;
  
  @include border-radius(0 0 2em 0);
}

.box-5 {
  background: #158FE5;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  margin: -2em * 3.25 2.55em * 4.6;
  z-index: -1;
}

.box-6 {
  background: #268CE7;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  z-index: -1;
  margin: -2em * 5.45 2.55em * 4.6;
}

.box-7 {
  background: #9A8AE0;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  z-index: -1;
  margin: -2em * 7.69 2.55em * 4.6;
  
  @include border-radius(0 2em 0 0);
}

.box-8 {
  background: #1290DA;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  z-index: -1;
  margin: -2em * 7.69 2.55em * 2.8;
}

.box-9 {
  background: #088BE2;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  z-index: -1;
  margin: -2em * 7.69 2.55em;
}

.box-10 {
  background: #10A7EB;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  z-index: -1;
  margin: -2em * 7.69 -2em;
  
  @include border-radius(2em 0 0 0);
}

.box-11 {
  background: #90BBDB;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  z-index: -1;
  margin: -2em * 5.45 -2em;
}

.box-12 {
  background: #629AC7;
  position: absolute;
  height: $size-of-box;
  width: $size-of-box;
  z-index: -1;
  margin: -2em * 3.25 -2em;
}



.seebeetee {
  color: #fff;
  position: absolute;
  right: 0.2em;
  bottom: 0.2em;
  text-decoration: none;
  border-bottom: 0.1em solid;
}

.inspired-by {
  color: #fff;
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  text-decoration: none;
  border-bottom: 0.1em solid;
}