Créer une bulle pour un commentaire ou une citation avec CSS

Vous avez certainement déjà vu lors de la lecture d'un blog, des commentaires ou tout autre texte dans une bulle de type bande dessinée. Très stylisé et à la mode ces temps-ci, c'est bulle mettront l'accent sur le texte à l'intérieur et attirera l'attention du visiteur. Alors si vous désirez insérer ce type d'élément graphique dans vos pages, voyez comment réussir le tout à l'aide d'un peu de CSS.

Le code HTML

Le tout se fait à partir d'un bloc div. Vous devez regarder la structure utilisée ci-dessous, car vous devrez obligatoirement garder la même.

<div class="bulle">
    <blockquote>
        <p>L'effet est magnifique!</p>
    </blockquote>
    <cite><strong>Dave Lizotte</strong> le 21 Mars 2008 à 11:26 AM</cite>
</div>

Le code CSS

Ajouter le code suivant à votre feuille de style. Vous pouvez aussi modifier les couleurs ainsi que tout l'aspect visuel de la bulle à partir de ces quelques lignes.

div.bulle {
    width: auto;
    font-size: 0.75em;
    margin-bottom: 24px;
}

div.bulle blockquote {
    margin: 0px;
    padding: 0px;
    border: 1px solid #c9c2c1;
    background-color: #fff;
}

div.bulle blockquote p {
    margin: 10px;
    padding: 0px;
}

div.bulle cite {
    position: relative;
    margin: 0px;
    padding: 7px 0px 0px 15px;
    top: 6px;
    background: transparent url(FlecheBulle.gif) no-repeat 20px 0;
    font-style: normal;
}

** L'image « FlecheBulle.gif » utilisée dans l'exemple ci-haut représente le petit triangle dans le bas de la bulle. Il est important de vous créer une image du genre ou d'utiliser la mienne en cliquant sur le lien de l'image

Ajouter cette page à votre Digg-Like préféré