Créer un superbe compteur de commentaires avec CSS

Ce tutoriel se veut très court, simple et intuitif, mais combien efficace. Vous avez un blog ou un site permettant aux lecteurs d'envoyer leurs commentaires à propos des articles ? Bien sûr vous désirez afficher le nombre de commentaires qui a été rédigé! Mais une simple ligne de texte informant qu'il y a 34 commentaires n'est pas nécessairement attrayante. Alors, voilà comment mettre en forme une jolie bulle afin d'afficher vos commentaires.
 

Structure

L'image suivante vous montre de quoi est composé votre compteur de commentaire.


Nous avons donc un bloc <div> principal qui contient un bloc <span> qui affiche lui le nombre de commentaires. Sous ce bloc, nous retrouverons donc le texte à afficher. Il ne vous reste donc qu'à trouver l'image qui vous conviendra. Nous avons utilisé ici une bulle.
 

HTML et CSS 

<div class="bulle">  
    <span class="compteur">X</span>  
    commentaires
</div>

.bulle{ 
    background:url(img/bulle.png) left top no-repeat;
    color:#575553;
    float:left;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:9px;
    height:68px;
    margin-right:20px;
    padding-top:7px;
    text-align:center;
    width:70px;
}
.bulle .compteur{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:24px;
    color:#CC6600;
}
Et voilà, le tour est joué! 2 minutes et le tout est en place.