Testing some bars

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

Thumbnail
This awesome code was written by giulianoliker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright giulianoliker ©
  • HTML
  • CSS
  • JavaScript
    
<ul id="bar">

  <li id="cinema">
    <div class="top"></div>
    <div class="bottom"></div>
  </li>

  <li id="macmini">
    <div class="top"></div>
    <div class="bottom"></div>
  </li>

</ul>

/*Downloaded from https://www.codeseek.co/giulianoliker/testing-some-bars-pKJrv */
    @import "compass/css3";

* {
  margin:0; 
  padding:0;
}

/* HTML ELEMENTS */
body { 
  background: -moz-radial-gradient(#364D58,#000); 
  background: -webkit-gradient(radial, center center,10,center center,1000, from(#364D58), to(#000)); 
  color:#555; 
  background-color:#151f23; 
}

/* BAR CHART */
#bar { 
  list-style:none; 
  margin:70px 0 0 200px; 
  width:400px; 
}

#bar li { 
  margin-top:-40px; 
}

/* First top should have a different colour */
#bar li:first-child div.top { 
  background-color:rgba(186,211,215,0.5); 
}

/* Last bottom should have a shadow */
#bar li:last-child div.bottom { 
  -moz-box-shadow: 0 10px 10px hsla(0,0%,0%,.2); 
  -webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2); 
  box-shadow: 0 100px 30px hsla(0,0%,0%,.2); 
}

/* Ellipse top */
#bar li div.top { 
  background-color:rgba(140,172,176,0.5); 
  position:relative; 
  width:100px; 
  height:40px; 
  -moz-border-radius: 100px/40px; 
  -webkit-border-radius: 100px 40px; 
  border-radius: 100px/40px; 
}

/* Bar bottom */
#bar li div.bottom { 
  background-color:rgba(184,203,205,0.5); 
  margin-top:-40px; 
  position:relative;
  width:100px; 
  -moz-border-radius: 100px/40px; 
  -webkit-border-radius: 100px 40px; 
  border-radius: 100px/40px; 
}

/* Cinema Display bar */
#cinema div.top { 
  z-index:93; 
}

#cinema div.bottom { 
  z-index:92; 
  height:100px; 
}

/* Mac Mini bar */
#macmini div.top { 
  z-index:91; 
}

#macmini div.bottom { 
  z-index:90; 
  height:50px; 
}


/*Downloaded from https://www.codeseek.co/giulianoliker/testing-some-bars-pKJrv */
    

Comments