Des bulles de dialogue en CSS3 sans image

Les bulles de dialogue sont un symbole largement répandu sur le web, popularisé par le web 2.0 et le User Generated Content : principalement les commentaires sur les blogs (et encore, car la tendance est à la baisse… La faute à Twitter). Le tutoriel proposé par Nicolas Gallagher présente plusieurs modèles de bulles de dialogue créées en CSS 2.1 (propriétés `:before` et `:after`) progressivement améliorées avec CSS 3 : dégradés, coins arrondis, etc. Et oui, pas d’image ni de Javascript pour un effet littéralement bluffant.

Cerise sur le gâteau, le marquage nécessaire est réduit au strict minimum pour un maximum d’effet :

J’ai bien envie de coincer la bulle

<h2 class='triangle-border'>J'ai bien envie de coincer la bulle</h2>

De quoi coincer la bulle pendant un bon moment devant cette page de démonstration 😉

Avec le marquage de type <p>Ma bulle</p> il est possible de réaliser les bulles ci-contre
Effet bulles de dialogue avec un marquage de type <p>Ma bulle</p>
En ajoutant un élément enfant (comme <blockquote><p>Quote</p></blockquote> il est possible de réaliser d’autres effets.
Effet bulles de dialogue avec un marquage de type <blockquote><p>Ma bulle</p></blockquote>

Compatibilité avec Internet Explorer

Mise à part les coins arrondis et les dégradés, cette bulle est totalement fonctionnelle sous IE8 (on garde le triangle caractéristique et le fond ou le contour.

Dans la version preview de IE9, les coins arrondis sont bien rendus. Manque juste les dégradés.

Dans IE7 le triangle disparait, mais le fond et le contour restent en place.

Conclusion en forme de bulle

Je sens que la feuille de style bubble.css va rejoindre rapidement ma boite à outils CSS et gageons qu’elle fera partie de tout bon framework CSS qui se respecte !

Via Kerweb.