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.
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) :
Tags: Bulles Commentaires, Design
Vous avez aimé cet article :
abonnez-vous au flux RSS
!
Loading ...
18 août 2008
[...] Bulles de commentaires en CSS (tags: web2) [...]
19 août 2008
Sympa!
Merci
25 août 2008
[...] 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 [...]