Le Journal du Blog
Le blog des blogueurs
Le blog des blogueurs
Voici une solution simple, proposée par Will Mayo pour afficher les commentaires de votre blog sous forme de bulles.
Télécharger le package complet >>
Voici le code CSS pour les Bulles normales et arrondies :
[sourcecode language='css']
/* 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;
}
[/sourcecode]
Voici un dérivé de ces bulles de commentaires en CSS (cliquez sur l’image pour voir la source) :
links for 2008-08-18 « Antoine Dupin (3 years ago)
[...] Bulles de commentaires en CSS (tags: web2) [...]
va crever (3 years ago)
Sympa!
Merci
Vu sur d autres blogs semaine 38 | Favoris (3 years ago)
[...] 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 [...]
Hérvé (2 years ago)
Woa, quel excellent code, j’allais justement m’apprêter à en coder un comme cela, mais je gagnerais du temps en réutilisant celui-ci, merci beaucoup et excellente journée à tous.
Elizebeth Lapage (9 months ago)
This post seems to get a large ammount of visitors. How do you get traffic to it? It offers a nice unique spin on things. I guess having something real or substantial to post about is the most important factor.