10 snippets CSS para criar gráficos de barras simples

Procurando uma maneira de criar gráficos de barras CSS simples na web? Esta coleção certamente ajudará, pois está repleta de gráficos de barras gratuitos e de código aberto, todos projetados em CSS.

A maioria desses gráficos tem um forte impacto com animações CSS extras e efeitos de gradiente. Mas você encontrará alguns que até mesmo reformulam o posicionamento, o tamanho, a forma e o design dos dados. A coleção perfeita para qualquer desenvolvedor front-end que procura uma interface de usuário de gráfico de barras elegante.

1. Gráficos de dados

Neste conjunto você encontrará alguns gráficos que são lindamente desenhados e muito bem executados. O desenvolvedor Kris Olszewski concentrou-se principalmente no UX para esses gráficos de barras, juntamente com o topo de cada barra compartilhando dados brutos (números de espaço reservado neste caso).

Naturalmente, a coisa toda roda em CSS, o que certamente é impressionante. Possui modelos para barras verticais e horizontais e barras em camadas onde você pode alterar a cor do plano de fundo com base em determinados valores.

Facilmente um dos meus conjuntos favoritos, porque oferece muita variedade para os desenvolvedores escolherem e personalizarem.

2. Gráfico de Barras de Pokémon

Não posso dizer que esse design seria particularmente útil em um layout do mundo real, mas com certeza é impressionante.

Essas barras estilo Pokémon oferecem um design gráfico criativo para a web. Cada barra conta com um certo esquema de cores junto com elementos vetoriais para os olhos de cada Pokémon.

Cada um apresenta um efeito de animação flutuante, para que você possa até reestilizá-lo para se adequar às transições que desejar. E se você quiser transformar essas criaturas em outros animais, você pode seguir este mesmo modelo com cores alteradas.

3. Gráfico Animado

Os gráficos de barras são usados ​​para exibir dados visuais para facilitar o consumo. Isso significa que itens visuais e dados brutos devem ser incluídos.

Isso é uma coisa que eu realmente gosto neste gráfico usando rótulos de porcentagem na parte superior de cada barra. Ele não apresenta uma legenda ou quaisquer rótulos X/Y, mas estes não seriam difíceis de adicionar.

Eu acho que a parte mais impressionante é como a coisa toda é executada em CSS. As animações e o texto de porcentagem aparecem devido às propriedades CSS. Coisas doidas!

4. Gráfico Minimalista

Simples e fácil de usar descreve melhor a mania minimalista que varre a web. O minimalismo geralmente é a melhor escolha para sites responsivos ou layouts mais simples que não exigem esquemas de cores pesados.

E com este gráfico de barras, você pode redefinir o estilo dos dados para caber em qualquer cor clara que desejar.

Ele usa linhas de fundo arbitrárias para indicar medições e você pode até adicionar rótulos no eixo Y para esclarecer os dados.

5. Barras de cores CSS puras

Os gradientes CSS adicionam muito à web e este gráfico de barras é apenas mais um exemplo de gradientes em ação.

Cada barra usa gradientes clássicos da web 2.0 que podem parecer um pouco antiquados, mas parecem fantásticos. Todo o design funciona em código Sass e usa variáveis ​​para definir o atraso da animação, os tamanhos das barras e a altura total do gráfico.

Para editar as cores, você precisará trabalhar com o Sass/SCSS ou usar o CodePen para compilar em CSS bruto. Mas não é um gráfico muito complexo, então isso não deve ser um grande problema.

6. Barras horizontais escalonadas

Animações lineares são algumas das minhas favoritas porque chamam a atenção rapidamente. Nesta caneta você verá um exemplo de animação linear com cada barra sendo carregada uma após a outra.

Ele foi projetado horizontalmente, para que as barras sejam carregadas na tela e incluam rótulos dentro do gráfico de barras. Dessa forma, a medição total do “nível de habilidade” segue o eixo X e deixa espaço para adicionar mais habilidades verticalmente.

Um dos gráficos de barras mais limpos que já vi e pode funcionar esplendidamente em qualquer site de portfólio baseado em habilidades.

7. Gráfico de barras responsivo

Todo site moderno realmente deve ser responsivo para acomodar todos os dispositivos. Mas alguns elementos são mais difíceis de responder do que outros.

Guias, tabelas grandes e gráficos são exemplos complexos. Este gráfico responsivo faz um excelente trabalho ao lidar com telas menores. Ele não reorganiza muito além do tamanho total e do espaço entre as barras.

Em telas menores, os itens do bar podem parecer apertados e quase impossíveis de ler. Mas, na maioria das vezes, esse estilo responsivo é fantástico e o substituto perfeito para gráficos estáticos.

8. Gráfico CSS Diário

Os desenvolvedores gostam de testar suas habilidades com desafios como Daily CSS. Isso extrai imagens de designs de interface do usuário todos os dias e solicita que os desenvolvedores as recriem em HTML/CSS.

Você encontrará muitos deles no CodePen, e este gráfico é um exemplo impecável.

Ele foi projetado com simplicidade e efeitos de animação limpos anexados a cada barra. Sem falar que segue um esquema de cores monocromático que pode se adaptar facilmente a qualquer site.

9. Carta de Vencimento

Outro exemplo legal de Daily CSS é este gráfico de inventário de vinhedos criado usando CSS e algumas habilidades de HTML.

É uma ideia bastante original e ainda mais impressionante que funciona exclusivamente através de CSS. Estou mais impressionado com o design real do gráfico e como ele é renderizado perfeitamente no navegador.

É verdade que isso também não funcionaria na maioria dos sites, mas é uma prova do que é possível no CSS moderno.

10. Habilidades horizontais somente CSS

Você encontrará muitos gráficos de barras de medição de habilidades on-line, mas este de Jed Trow é um verdadeiro deleite.

Ele foi projetado para ser totalmente responsivo e funciona perfeitamente em qualquer tela. Você pode redimensionar este gráfico de barras para 320px para smartphones e ele ainda manterá sua consistência.

Além disso, esta caneta inclui uma pequena seção de tutorial abaixo da demonstração, onde você pode ver todo o código-fonte e como ele funciona. Claro, você também pode simplesmente copiar/colar do IDE do CodePen, mas é bom ver um desenvolvedor detalhar seu processo.

Todos esses gráficos oferecem algo único, mas também compartilham uma coisa em comum: um uso incrível de código CSS puro.

Você também pode gostar: 10 bibliotecas de gráficos de dados JavaScript de código aberto que valem a pena considerar.