Des bulles de dialogue en CSS3 sans image

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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.

Articles sur le même sujet

  • Pas d'article sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



18 commentaires pour “Des bulles de dialogue en CSS3 sans image”

  1. MrThieu dit :

    Super mais ça passe pas sous IE8. Et malgré tout ce qu’on peut dire sur ce navigateur, on doit faire avec.

  2. Bruno Bichet dit :

    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 ;)

  3. Louis_marie_c dit :

    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 ;)

  4. Bruno Bichet dit :

    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 ;)

  5. Social comments and analytics for this post…

    This post was mentioned on Twitter by YohanSpychala: Des bulles de dialogue en CSS3, sans image http://bit.ly/aXaeFG

  6. Louis_marie_c dit :

    Oui mais si il n’y a plus les coins ce n’est plus une bulle ;)

  7. Red-Rabbit dit :

    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

  8. Benjamin dit :

    Le fait de mettre un espece de nbsp dans en tant que « content » css. Ce n’est pas un peu sale ?

  9. Bruno Bichet dit :

    @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.

  10. Julien dit :

    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.

  11. Bruno Bichet dit :

    @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 ;)

  12. 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()

  13. MrThieu dit :

    Je retire ce que j’ai dit, il s’agit des bulles composée avec CSS3.

  14. clawfire dit :

    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 ;)

  15. Julien dit :

    Vraiment impressionnant ! Mais quand je pense que l’on code encore pour IE6 ça me rend malheureux.

  16. Tulekeke dit :

    on ne dit pas « bulle » mais « phylactères »

  17. […] Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? Des bulles de dialogue en CSS3 sans image […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site