This is CSS3 Bar chart. A bar graph is a chart that uses either horizontal or vertical bars to show comparisons among categories. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value. Some bar graphs present bars clustered in groups of more than one (grouped bar graphs), and others show the bars divided into subparts to show cumulate effect (stacked bar graphs).
Live Demo
DownloadSource Code:
<html>
<head>
<title>Bar Chart</title>
<style>
dt { float: left; padding: 4px; }
.bar {
margin-bottom: 10px;
color: #fff;
padding: 4px;
text-align: center;
background-color: #0080FF;
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25)));
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-animation-name:bar;
-webkit-animation-duration:0.5s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:ease-out;
}
</style>
</head>
<body>
<div style="width: 300px">
<dt>2012</dt>
<dd><div id="data-one" class="bar" style="width: 100%">100%</div></dd>
<dt>2011</dt>
<dd><div id="data-two" class="bar" style="width: 50%">50%</div></dd>
<dt>2010</dt>
<dd><div id="data-three" class="bar" style="width: 40%">40%</div></dd>
<dt>2009</dt>
<dd><div id="data-four" class="bar" style="width: 80%">80%</div></dd>
</div>
</body>
</html>
<head>
<title>Bar Chart</title>
<style>
dt { float: left; padding: 4px; }
.bar {
margin-bottom: 10px;
color: #fff;
padding: 4px;
text-align: center;
background-color: #0080FF;
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25)));
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-animation-name:bar;
-webkit-animation-duration:0.5s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:ease-out;
}
</style>
</head>
<body>
<div style="width: 300px">
<dt>2012</dt>
<dd><div id="data-one" class="bar" style="width: 100%">100%</div></dd>
<dt>2011</dt>
<dd><div id="data-two" class="bar" style="width: 50%">50%</div></dd>
<dt>2010</dt>
<dd><div id="data-three" class="bar" style="width: 40%">40%</div></dd>
<dt>2009</dt>
<dd><div id="data-four" class="bar" style="width: 80%">80%</div></dd>
</div>
</body>
</html>
No comments:
Post a Comment