Gráficos de barra com CSS

Criar gráficos de barra não exige conhecimento afinado em PHP, JavaScript ou XML. Você pode simplesmente implementar uma solução simples com HTML e CSS. Com uma simples técnica, você pode montar uma tabela que ilustra todos os dados em formato de barras.

HTML

Nosso HTML se resume ao seguinte:

<div id="graphbox">
    <h2>JavaScript Frameworks</h2>
    <div class="graph"><strong class="orangebar" style="width: 55%;">Prototype: 55%</strong></div>
    <div class="graph"><strong class="greenbar" style="width: 90%;">jQuery: 90%</strong></div>
    <div class="graph"><strong class="bluebar" style="width: 75%;">Script.aculo.us: 75%</strong></div>
    <div class="graph"><strong class="orangebar" style="width: 33%;">Dojo: 33%</strong></div>
    <div class="graph"><strong class="greenbar" style="width: 98%;">Mootools: 98%</strong></div>
    <div class="graph"><strong class="greenbar" style="width: 85%;">Mochikit: 85%</strong></div>
</div>

CSS

#graphbox {
	border:1px solid #e7e7e7;
	padding:20px 20px;
	width:400px;
	background-color:#f8f8f8;
}
#graphbox h2{
	color:#666666;
	font-family:Arial, sans-serif;
	font-size:1.1em;
	padding-bottom:0.3em;
	font-weight:bold;
	text-align:center;
}
#graphbox p {
	color:#888888;
	font-family:Arial, sans-serif;
	font-size:0.8em;
	padding-top: 0.3em;
	text-align:left;
}
.graph {
	background-color: #F0EFEF;
	border:1px solid #cccccc;
	padding:2px 2px;
}
.graph .orangebar, .graph .greenbar, .graph .bluebar {
	text-align:left;
	color:#ffffff;
	height:1.8em;
	line-height:1.8em;
	font-family:Arial, sans-serif;
	display:block;
}
.graph .orangebar {
	background-color:#ff6600;
}
.graph .greenbar {
	background-color:#66CC33;
}
.graph .bluebar {
	background-color:#3399CC;
}

Vamos a explicação do CSS utilizado para gerar o gráfico: Primeiro definimos uma largura total para a área do gráfico, que no exemplo foi de 400px. Após criamos as divs que conterão as nossas barras para que ao definirmos as larguras em porcentagem, elas não ultrapassem os limites do box. Vejam o exemplo.

Esse tutorial é uma livre tradução do original de: Impress Lab.