29 de setembro de 2008

Como criar gráficos com CSS

As propriedades do CSS podem ser usadas para criar gráficos de barra. Essa é uma excelente forma de apresentar informações para os visitantes do site. Confira o exemplo online, antes de começar, para entender melhor.

Primeiro, deve-se criar a DIV que será a porcentagem do gráfico.

HTML

<div class="grafico"><strong style="width: 47%;" class="bar">47%</strong></div>

Agora, partimos para os estilos:

CSS

.grafico {
position: relative; /* para corrigir problema no IE */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}


O CSS acima declara que a largura da DIV grafico deve ser 200px, define 1px de borda, e deixa um pequeno espaço entre a borda da div e a barra de porcentagem.

CSS

.grafico .barra {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}

.graph .bar span { position: absolute; left: 1em; } /* para corrigir problema no IE */


Agora vem o truque. A "barra" é definida com uma cor de fundo, que tenha bom contraste com o fundo da página. O texto é alinhado no centro da barra.Para mudar a porcentagem, basta modificar o style="width: 88%;" no HTMLA página pronta (com os códigos) está aqui.

Referencias:
CSS for bar graphs

0 comentários: