Le Journal du Blog - L’actualité des blogs

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

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