Bulles de commentaires en CSS

Posté le 18 août 2008 par Romain dans Ergonomie et Design

Bienvenue sur le Journal du Blog, vous pouvez vous abonner au flux RSS. Merci pour votre visite!

Voici une solution simple, proposée par Will Mayo pour afficher les commentaires de votre blog sous forme de bulles.

preview Bulles de commentaires en CSS

Télécharger le package complet >>

Voici le code CSS pour les Bulles normales et arrondies :


/* Normal Bubble */
div.bubble {
width: auto;
font-size: 0.75em;
margin-bottom: 24px;
}

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

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

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

/* Rounded Bubble */
div.bubble div.rounded {
margin-bottom: 10px;
border: 3px solid #fff;
background-color: #b7e0ff;
}
div.bubble div.rounded blockquote {
border: 0;
background-color: transparent;
}
div.bubble div.rounded blockquote p {
margin: 0px 10px;
}
div.bubble cite.rounded {
position: relative;
margin: 0px;
padding-left: 15px;
padding-top: 12px;
top: 9px;
background: transparent url(tip-rounded.gif) no-repeat 15px 0;
}

/* Pimped Bubble */
div#pimped.bubble {
font-size: 0.9em;
}
div#pimped.bubble div.rounded {
color: #fff;
border: 3px solid #fff;
background-color: #111;
}
div#pimped.bubble cite.rounded {
background: transparent url(tip-pimped.gif) no-repeat 15px 0;
}

Voici un dérivé de ces bulles de commentaires en CSS (cliquez sur l’image pour voir la source) :

image-4 Bulles de commentaires en CSS

Tags: ,

Vous avez aimé cet article : abonnez-vous au flux RSS !

3 commentaires

  1. [...] Bulles de commentaires en CSS (tags: web2) [...]


  2. va crever
    19 août 2008

    Sympa!

    Merci ;-)


  3. [...] nous propose une autre manière d’afficher les commentaires de son blog avec des bulles de commentaires en CSS, le code source y est mis à disposition : de quoi vous aider à une présentation différente de [...]


Laisser un commentaire

A lire sur d'autres blogs


Sondage

Qu'aimeriez-vous le plus apprendre en matière de blogging?

Résultats

Loading ... Loading ...

Archives

Lecteurs