10 extraits CSS pour créer des graphiques à barres simples

Vous cherchez un moyen de créer des graphiques à barres CSS simples sur le Web ? Cette collection vous aidera à coup sûr car elle regorge de graphiques à barres gratuits et open source, tous conçus en CSS.

La plupart de ces graphiques sont puissants avec des animations CSS supplémentaires et des effets de dégradé. Mais vous en trouverez quelques-uns qui redéfinissent même le positionnement, la taille, la forme et la conception des données. La collection parfaite pour tout développeur frontend à la recherche d'une interface utilisateur graphique à barres élégante.

1. Graphiques de données

Dans cet ensemble, vous trouverez quelques graphiques magnifiquement conçus et très bien exécutés. Le développeur Kris Olszewski s'est principalement concentré sur l'UX pour ces graphiques à barres, ainsi que sur le haut de chaque barre partageant des données brutes (numéros d'espace réservé dans ce cas).

Naturellement, le tout fonctionne sur CSS, ce qui est certainement impressionnant. Il propose des modèles pour les barres verticales et horizontales et les barres à plusieurs niveaux où vous pouvez modifier la couleur d'arrière-plan en fonction de certaines valeurs.

Facilement l'un de mes ensembles préférés car il offre une grande variété de choix et de personnalisation aux développeurs.

2. Graphique à barres Pokémon

Je ne peux pas dire que cette conception serait particulièrement utile dans une mise en page du monde réel, mais elle est certainement impressionnante.

Ces barres de style Pokémon offrent une conception graphique créative pour le Web. Chaque barre repose sur une certaine palette de couleurs ainsi que sur des éléments vectoriels pour les yeux de chaque Pokémon.

Chacun comporte un effet d'animation de survol, vous pouvez donc même le relooker pour l'adapter aux transitions que vous souhaitez. Et si vous souhaitez transformer ces créatures en d'autres animaux, vous pouvez suivre ce même modèle avec des couleurs modifiées.

3. Graphique animé

Les graphiques à barres sont utilisés pour afficher des données visuelles pour une consommation facile. Cela signifie que les éléments visuels et les données brutes doivent être inclus.

C'est une chose que j'aime vraiment dans ce graphique utilisant des étiquettes de pourcentage en haut de chaque barre. Il ne comporte pas de légende ni d'étiquettes X/Y, mais celles-ci ne seraient pas difficiles à ajouter.

Je pense que la partie la plus impressionnante est la façon dont tout cela passe par CSS. Les animations et le texte de pourcentage apparaissent tous les deux à cause des propriétés CSS. Des trucs fous !

4. Graphique minimaliste

Simple et facile à utiliser décrit le mieux l'engouement minimaliste qui balaie le Web. Le minimalisme est souvent le meilleur choix pour les sites Web réactifs ou les mises en page plus simples qui ne nécessitent pas de schémas de couleurs lourds.

Et avec ce graphique à barres, vous pouvez modifier le style des données pour les adapter à la couleur de lumière de votre choix.

Il utilise des lignes d'arrière-plan arbitraires pour indiquer les mesures, et vous pouvez même ajouter des étiquettes sur l'axe Y pour clarifier les données.

5. Barres de couleur CSS pures

Les dégradés CSS ajoutent beaucoup au Web et ce graphique à barres n'est qu'un exemple de plus de dégradés en action.

Chaque barre utilise des dégradés Web 2.0 classiques qui peuvent sembler un peu à l'ancienne, mais ils ont l'air fantastiques. L'ensemble de la conception fonctionne sur le code Sass et utilise des variables pour définir le délai d'animation, la taille des barres et la hauteur totale du graphique.

Pour modifier les couleurs, vous devrez passer par le Sass/SCSS ou utiliser CodePen pour compiler en CSS brut. Mais ce n'est pas un graphique trop complexe, donc cela ne devrait pas poser beaucoup de problèmes.

6. Barres horizontales décalées

Les animations linéaires font partie de mes préférées car elles attirent rapidement l'attention. Dans ce stylo, vous verrez un exemple d'animation linéaire avec chaque barre se chargeant dans la vue l'une après l'autre.

Il est conçu horizontalement, de sorte que les barres se chargent sur l'écran et incluent des étiquettes à l'intérieur du graphique à barres. De cette façon, la mesure totale du "niveau de compétence" suit l'axe des X et laisse de la place pour ajouter plus de compétences verticalement.

L'un des graphiques à barres les plus propres que j'ai vus et il peut fonctionner à merveille sur n'importe quel site Web de portefeuille basé sur les compétences.

7. Graphique à barres réactif

Chaque site Web moderne devrait vraiment être réactif pour s'adapter à tous les appareils. Mais certains éléments sont plus difficiles à responsabiliser que d'autres.

Les onglets, les grands tableaux et les graphiques sont tous des exemples complexes. Ce graphique réactif fait un excellent travail en gérant des écrans plus petits. Il ne réorganise pas beaucoup au-delà de la taille totale et de l'espace entre les barres.

Sur les écrans plus petits, les éléments de la barre peuvent sembler exigus et presque impossibles à lire. Mais pour la plupart, ce style réactif est fantastique et le substitut parfait aux graphiques statiques.

8. Graphique CSS quotidien

Les développeurs aiment tester leurs compétences avec des défis comme Daily CSS. Cela extrait chaque jour des images de conceptions d'interface utilisateur et demande aux développeurs de les recréer en HTML/CSS.

Vous en trouverez beaucoup sur CodePen, et ce graphique en est un exemple parfait.

Il est conçu avec simplicité et des effets d'animation propres attachés à chaque barre. Sans oublier qu'il suit un schéma de couleurs monochrome qui peut facilement s'adapter à n'importe quel site Web.

9. Tableau d'inventaire

Un autre exemple cool de Daily CSS est ce tableau d'inventaire de vignoble créé à l'aide de CSS et de quelques compétences HTML astucieuses.

C'est une idée assez unique et encore plus impressionnante qu'elle fonctionne uniquement via CSS. Je suis très impressionné par la conception réelle du graphique et par la façon dont il s'affiche parfaitement dans le navigateur.

Certes, cela ne fonctionnerait pas non plus sur la plupart des sites Web, mais c'est un témoignage de ce qui est possible dans le CSS moderne.

10. Compétences horizontales CSS uniquement

Vous trouverez de nombreux graphiques à barres mesurant les compétences en ligne, mais celui-ci de Jed Trow est un vrai régal.

Il est conçu pour être entièrement réactif et fonctionne parfaitement sur n'importe quel écran. Vous pouvez redimensionner ce graphique à barres jusqu'à 320 pixels pour les smartphones, et il conservera sa cohérence.

De plus, ce stylet comprend une petite section de didacticiel sous la démo où vous pouvez voir tout le code source et son fonctionnement. Bien sûr, vous pouvez également simplement copier/coller depuis l'IDE de CodePen, mais il est agréable de voir un développeur décomposer son processus.

Tous ces graphiques offrent quelque chose d'unique, mais ils partagent également une chose en commun : une utilisation étonnante du code CSS pur.

Vous pourriez également aimer: 10 bibliothèques de graphiques de données JavaScript Open Source à considérer.