Hello developers. Today I am very much excited to tell you how we can make vertical rating meter using css , html and little php (or may be some other language). The meter reading goes from 0 to 100 units. In this example I am taking units as percentage. The trick is very simple and easy to understand. I am using one meter image in background and hiding its height with overlay blank div.
Here is the DEMO.
Works perfectly on ie6 , firefox and chrome
Simply copy and paste the following code inside your body tag:
Here is the CSS. Place it inside your style sheet.
#performance_meter{background:url("meter.gif") no-repeat;width:93px;height:375px}
#performance_meter .wrap{height:268px}
#performance_meter .overlay{position:absolute;width:27px;background:#fff;margin-left:33px;margin-top:27px;}
.
Alll done! Check out the DEMO how it looks.
Cheers!