Gráfico de barras com CSS, parte 2

[helldanger1]

Fazemos um gráfico de barras CSS mais elaborado, com camadas e construção e posicionamento CSS.
Por Miguel Angel Alvarez - Tradução de JML



O posicionamento CSS nos serve para criar elementos complexos em páginas web, como poderia ser um gráfico de barras. No artigo anterior do Workshop de CSS aprendemos a realizar uma construção de um gráfico de barras com CSS.

Utilizaremos um HTML no qual temos umas simples camadas e com CSS definiremos seus estilos e posicionamento, de modo que obtenhamos um desenho para realizar um atrativo gráfico de barras, separando por completo o aspecto do conteúdo.

Neste artigo veremos como realizar o segundo gráfico do exemplo, o de baixo, que é um pouco mais elaborado, ao contar várias cores para as barras e uma legenda.

 

[helldanger1]

O código HTML para o gráfico

<div id=container2 class=gris>
<div id=titulo2>Buscadores referidos</div>
<div id=grafico2 class=degradeverde>
<div id=google class=azul></div>
<div id=direct class=verde></div>
<div id=msn class=vermelho></div>
<div id=yahoo class=roxo></div>
</div>
<div id=legenda>
<ul>
<li class=azul>Google</li>
<li class=verde>Direto</li>
<li class=vermelho>MSN</li>
<li class=roxo>Yahoo</li>
</ul>
</div>
</div>

Como o gráfico do artigo anterior, temos um container que tem dentro todos os elementos do gráfico: O título, o gráfico com as barras e a legenda.

O título é uma simples camada com texto. O gráfico é outra camada que contem outras camadas com cada uma das barras. Por último, a legenda, que está dentro de outra camada, tem uma lista com os distintos elementos que se mostram no gráfico.

Vejamos os estilos para cada elemento dividido entre classes e identificadores. As classes para os estilos comuns a vários elementos e os identificadores com os estilos próprios de cada camada. Vejamos agora os estilos para os identificadores.

O container tem um posicionamento, um tamanho e um espaçado.

#container2{
position: relative;
padding:5px;
width: 280px;
}

O título tem uma tipografia e uma margem.

#titulo2{
font: bold 10pt Verdana, Tahoma, Arial;
margin:2 0 5 0px;
}

O gráfico tem dentro umas dimensões e um espaçamento à esquerda.

#grafico2 {
width: 250px;
height: 100px;
padding-left:20px;
position: relative;
}

 

[helldanger1]

Logo, para cada uma das barras temos um posicionamento absoluto, para coloca-las dentro do gráfico. Como esta camada está dentro do gráfico, a posição absoluta corresponde à posição que ocupará a barra dentro da camada do gráfico.

#google{
width: 190px;
height: 30px;
position:absolute;
left:0px;
top:10px;
}
#direct{
width: 80px;
height: 30px;
position:absolute;
left:0px;
top:25px;
}
#msn{
width: 35px;
height: 30px;
position:absolute;
left:0px;
top:40px;
}
#yahoo{
width: 25px;
height: 30px;
position:absolute;
left:0px;
top:55px;
}

Como se pode ver, cada barra tem uma largura que corresponde com o valor que se quer representar.

 

[helldanger1]

Para a legenda, há que definir estilos tanto para a camada da legenda como para a lista que contem.

#legenda{
position: relative;
text-align:center;
}
#legenda ul{
margin:10 0 10 0px;
padding: 0px;
}
#legenda li{
display:inline;
font: bold 8pt Verdana, Tahoma, Arial;
height: 10pt;
margin: 2px;
padding: 2px;
}

O mais destacável da lista é que tem o display inline, que fará com que se mostrem todos os elementos em uma linha, ao invés de ocupar um elemento por linha de texto.

Terminamos vendo as classes, que contém as cores de fundo e borda das camadas. Como cada barra tem sua cor, cada uma tem sua classe diferente, que utilizamos também como estilo na legenda. Ademais, tanto o container como o gráfico em si, têm um estilo personalizado, que já utilizamos e comentamos no exercício anterior, com um gráfico de barras mais simples.

 

[helldanger1]

.azul{
background-color: #9190a8;
border-bottom: 2px solid #535270;
border-right: 2px solid #535270;
border-top: 2px solid #cbcbda;
border-left: 2px solid #cbcbda;
}

.vermelho{
background-color: #c47965;
border-bottom: 2px solid #67382c;
border-right: 2px solid #67382c;
border-top: 2px solid #e1a494;
border-left: 2px solid #e1a494;
}
.verde{
background-color: #5aae4c;
border-bottom: 2px solid #357d2a;
border-right: 2px solid #357d2a;
border-top: 2px solid #aceaa2;
border-left: 2px solid #aceaa2;
}
.cinza{
background-color: #b5b5b5;
border-bottom: 2px solid #6b6b6b;
border-right: 2px solid #6b6b6b;
border-top: 2px solid #f0f0f0;
border-left: 2px solid #f0f0f0;
}
.roxo{
background-color: #a05aab;
border-bottom: 2px solid #672770;
border-right: 2px solid #672770;
border-top: 2px solid #d090d9;
border-left: 2px solid #d090d9;
}
.degradeverde{
background-color: #e1e455;
background-image: url('images/degrade-verde.jpg');
background-repeat: repeat-x;
border-bottom: 2px solid #6f722d;
border-right: 2px solid #6f722d;
border-top: 2px solid #ece996;
border-left: 2px solid #ece996;
}

Simplesmente deve-se notar que se utiliza uma cor de fundo e umas bordas para criar um efeito melhor. Na classe que dá cor ao gráfico, chamada degradeverde, utilizamos ademais uma imagem de fundo.



Com isto, vimos como criar gráficos de barras somente com estilos CSS e umas quantas camadas. As possibilidades são muito maiores se desejarmos empregar um pouco de tempo e criatividade para melhorar os exemplos presentes e torna-los mais variados.