Un diagramme en barre, en pure CSS

Pour mon stage chez Ultranoir (j’en reparlerais plus tard), j’ai eu l’occasion de réaliser un diagramme en barre, simple. J’ai voulu qu’il soit complètement en CSS (j’ai quand même rajouté de l’animation en javascript par la suite, mais pour cet article, je me contenterai de vous présenter le diagramme sans animation).

Pour commencer, voilà la structure html du diagramme:

Vous l’aurez compris, notre diagramme est composé de 4 barres! Passons maintenant à la première partie du CSS:

.bar {
  width: 100px;
  height: 100px;
  float: left;
}
.g1 {
  background: #029FD6;
  position: relative;
}

.g2 {
  background: #E2017B;
  position: relative;
}

.g3 {
  background: #A4C409;
  position: relative;
}
.g4 {
  background: #939393;
  position: relative;
}

Maintenant, notre div .gX étant en position absolute, il suffit de lui donner la bonne taille et le bon attribut TOP dans votre feuille de style, et le tout est joué!
Si vous souhaitez votre un exemple qui fonctionne, voilà la page complète:

NB: Bizarrement, le plugin qui affiche le code HTML ne semble pas afficher l’attribut top dans le style des gX… Il suffit de le rajouter comme ceci: style= »height: 180px; top: 120px; width: 100px; » ou la valeur de top est la hauteur totale moins la hauteur de la barre souhaitée.

N’oubliez pas d’enregistrer la feuille de style dans le fichier styles.css

Le résultat devrait ressemble à ça:

graph

Pour ne plus avoir à calculer le TOP et la hauteur de chaques barres, une petite fonction PHP ne fera pas de mal. Je ne la donnerai pas ici, ce n’est pas le but de l’article, mais si vous rencontrez un problème, n’hésitez pas à laisser un commentaire !

Mat_

Au départ on sort avec un diplôme d’ingénieur de l’ESIL (devenu Polytech’Marseille) en Informatique, réseau et multimédia, spécialisé dans les Systèmes d’Informations et Services E-Business. En même temps on bosse, on développe, on apprend. Et maintenant on entreprend. Passionné de nouvelles technologies, et évangéliste de WordPress, j’aime découvrir, tester, rechercher.

Vous aimerez aussi...

3 réponses

  1. madvic dit :

    Ne fonctionne pas à l’écran…

    • Même constat. L’exemple ne s’affiche pas. (Chrome 32)

      • Mathieu dit :

        Merci à tous. Je vais corriger ça dans la journée. Cependant, l’article date de 2009, et même si c’était assez pratique à l’époque, il se trouve qu’aujourd’hui on doit pouvoir réaliser ça bien plus élégamment 🙂
        Mais ce sera corrigé !

Suivez Kune.fr sur les réseaux sociaux !

Kune.fr est votre site de ressources web. Vous y trouverez de nombreux outils utiles pour le web.
Alors n'hésitez plus, aimez notre page !

  • Ressources Wordpress, tutoriels, plugins et thèmes
  • Ressources design, packs d'icônes, kits UI ...
Fermer cette popup
%d blogueurs aiment cette page :