<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 */