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
En ajoutant un élément enfant (comme <blockquote><p>Quote</p></blockquote> il est possible de réaliser d’autres effets.
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.
Super mais ça passe pas sous IE8. Et malgré tout ce qu’on peut dire sur ce navigateur, on doit faire avec.
MrThieu — Si si, globalement la bulle passe très bien dans ie8, il manque juste les coins arrondis, mais c’est vraiment un détail puisqu’on garde l’esprit de la bulle de dialogue avec le petit triangle caractérisque 😉
Ah IE8 toute la magie de Microsoft ! les coins sont importants dans la bulle si tu les enlèves on appel plus ça une bulle 😉
Louis_marie_c — Je ne suis pas d’accord, les coins ne sont pas discriminant pour faire ou reconnaitre une bulle de dialogue. On trouve de nombreuses « bulles » carrées dans les bandes-dessinées et ça ne choque personne 😉
Oui mais si il n’y a plus les coins ce n’est plus une bulle 😉
Juste pour rire … Avez vous regardez la définition de coin ?
Pour moi et dans beaucoup de métier un coin c’est un angle quelque soit sa valeur. Et un arrondi,c’est un arrondi de x pixels de rayon.
Soyez sage hein, je rigole
Le fait de mettre un espece de nbsp dans en tant que « content » css.
Ce n’est pas un peu sale ?
@Benjamin — non, un espace insécable dans un content n’est pas « sale », surtout en regard du service rendu et de la clarté du code HTML qui est préservé par rapport à ce qu’il faudrait pour arriver au même résultat si on devait ajouter des balises div et des images.
Bof… Pas vraiment convaincu… 33Ko (sans compression) c’est lourd et la compatibilité n’est pas géniale. Tout ça pour des effets à utiliser modérement.
@Julien — Il est tout a fait possible de n’utiliser qu’un effet ou deux parmi ceux qui sont disponibles pour les copier-coller dans sa CSS 😉
Bonjour,
Tout d’abord bravo côté CSS. Chapeau bas ! Concernant les coins arrondis sous ie8, no problemo.
Il y a plusieurs façons de les générer. Voici deux tutos sur le sujet utilisant deux méthodes trés différentes.
Avec le sympathique fichier roundies.js de Drew DILLER
Ou bien Balise canvas et méthode getContext()
Je retire ce que j’ai dit, il s’agit des bulles composée avec CSS3.
Classe le petit tuto. Sinon pour ajouter ma pierre a l’édifice, pour la compatibilité avec IE6/7/8 et le css3 j’utilise un petit bout de js que j’inclus en commentaire conditionnel pour aller gentiment retoucher le rendu sous IE et tada tout marche bien. Chercher un peu IE8.js sur google code 😉
Vraiment impressionnant ! Mais quand je pense que l’on code encore pour IE6 ça me rend malheureux.
on ne dit pas « bulle » mais « phylactères »