08

Out

Gráficos de Barras com CSS
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%
8%

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:

css
  1.  .grafico { 
  2.         position: relative;
  3.  
  4.         width: 200px;
  5.  
  6.          margin-bottom: .5em;
  7.    
  8.         border: 1px solid #B1D632;
  9.  
  10.         padding: 2px;
  11.  
  12.  }
  13. .grafico .bar { 
  14.         display: block;
  15.     
  16.         position: relative;
  17.  
  18.         background: #B1D632;
  19.  
  20.         text-align: center;
  21.  
  22.         color: #333;
  23.  
  24.         height: 2em;
  25.  
  26.         line-height: 2em;
  27.                                     
  28. }
  29. .grafico .bar span { position: absolute;
  30.  left: 1em;
  31.  }        

 

HTML:

html
  1.  <div class="grafico">
  2.       <strong class="bar" style="width: 74%;
  3. ">74%</strong></div>
  4. </div> 
  5.  


Gostou deste Artigo?
Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!
Categoria:
Se preferir, pode ainda deixar um comentário

PATROCINADORES


cometarios
Trackback(0)

Escreva o seu Comentario
 
  pequeno | maior
 

busy
 

Patrocinadores do Site

Subscrever Feed

Artigos

Ultimos artigos
Como rodar imagens com javascript
jsimageNeste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span co...
Crie facilmente miniaturas das suas imagens com PHP
phpthumbAtualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
Otimize as suas imagens com PunyPng
benchmarksA pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
Como redimensionar imagens com PHP
phpimageredRedimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
Links de Afiliados com Javascript - Update
linksafiliadosNo inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...