Gráficos de Barras com CSS

08 Outubro 2008 Escrito por Gonçalo Martins

graficosbarras

Já alguma vez se perguntaram se seria possível criar gráficos de barras utilizando CSS? Muitas vezes quando chego a alguns sites, estes encontram-se a utilizar plugins, extensões, javascript, até imagens, para criarem simples gráficos.

Estas abordagens são muitas vezes desnecessárias, uma vez que é possível criar gráficos de barras única e exclusivamente com CSS.

Ficariam com algo do género:

24%

74%

Como pode ver não é utilizado qualquer tipo de imagem para criar o exemplo acima e é extremamente fácil de implementar utilizando meia dúzia de linhas CSS e uma linha de HTML por barra que deseja mostrar.

CSS:

.grafico {
        position: relative;
        width: 200px;
margin-bottom: .5em;
        border: 1px solid #B1D632;
        padding: 2px;
}
.grafico .bar {
        display: block;
        position: relative;
        background: #B1D632;
        text-align: center;
        color: #333;
        height: 2em;
        line-height: 2em;
}
.grafico .bar span { position: absolute; left: 1em; }

HTML:

CSS:

HTML:

Artigos Relacionados

Nuvem de Tags