Lors de la conception de ce site j’ai adopté immédiatement les nouveaux langagues CSS3 et HTML5 que j’avais découvert à travers de nombreux blogs. La troisième version de CSS permet nottament d’ajouter des fonds en dégradés, des bords arrondis, des ombres portées, … J’ai alors remplacer mon icône png de commentaires en forme de bulle par un design entièrement codée plus flexible mais avec le même rendu visuel. Vous êtes libres d’emprunter, de modifier et de partager ces lignes de codes, je demanderai juste une citation de l’auteur (moi) et un lien vers ce site.
Si vous avez des questions, les commentaires sont grands ouverts.

Le résultat en image :

Je me suis largement inspiré de la « CSS Speech Bubble » de desandro.com pour le code CSS et du graphisme de l’icone gratuite WooFunction.

Pour le HTML, une simple balise p qui contient une span vide qui servira de conteneur pour le triangle.
{code type=html}

0

{/code}

Ce code CSS est basique, on peut y ajouter facilement des styles pour les états :hover et :active.
{code type=css}
/* ———————— Comments Bubble ——————————— */
p {
padding: 0.2em 0 0 0;
margin: 0;
position: relative;
text-align: center;
font-weight: bold;
}
p a { /*the rounded rectangle*/
padding: 2px 10px;
background: #ddd;
border-color: #fff #888 #888 #888;
border-style: solid;
border-width: 1px;
-moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; border-radius: 0.25em;
-moz-box-shadow:0 0 6px rgba(0,0,0,0.8); -webkit-box-shadow:0 0 6px rgba(0,0,0,0.8); box-shadow:0 0 6px rgba(0,0,0,0.8);
background: -moz-linear-gradient(#ddd, #aaa);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(0.5, #aaa));
}
p span:first-child { /*the triangle*/
position: absolute;
top: 1.5em;
left: 0.5em;
z-index: 1;
border-left: 6px solid #aaa;
border-bottom: 6px solid rgba(0,0,0,0);
}
/* ————————————————————————— */
{/code}

Pour afficher une image de substitution sur Internet Explorer qui ne gère pas assez le CSS3, vous pouvez mettre ce code dans une feuille de style à part, consacrée à IE, que vous appelé dans un commentaire conditionnel dans le de votre html.
{code type=css}
/* ———————— Comments Bubble ——————————— */
p {
display: block;
width: 30px;
height: 30px;
background: url(‘images/comments.png’) no-repeat;
}
p a {padding: 0; border: medium none; background: none;}
p span {top: 0; left: 0; z-index: 0; border: medium none;}
/* —————————————————————————– */
{/code}

____________________________________________________________________

Pour wordpress, je vous restitue le code qui est utilisé sur ce site :

HTML (wordpress)
{code type=php}

X‘); ?>

{/code}

CSS (wordpress)
{code type=css}
/* ———————— Comments Bubble ——————————— */
article > header > p:first-child * {color: #333;}
article > header > p:first-child {
padding: 0.2em 0 0 0;
margin: 0;
float: right;
position: relative;
text-align: center;
font-weight: bold;
background: url(‘images/comments.png’) no-repeat;
}
article > header > p:first-child span > strong, /*Comments closed transforms to , add child in php*/
article > header > p:first-child a { /*the rounded rectangle*/
padding: 2px 10px;
background: #ddd;
border-color: #fff #888 #888 #888;border-style: solid; border-width: 1px;
-moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; border-radius: 0.25em;
-moz-box-shadow:0 0 6px rgba(0,0,0,0.8); -webkit-box-shadow:0 0 6px rgba(0,0,0,0.8); box-shadow:0 0 6px rgba(0,0,0,0.8);
background: -moz-linear-gradient(#ddd, #aaa);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(0.5, #aaa));
}
article > header > p:first-child a:hover {
padding: 3px 11px;
font-size: 1.1em; background: #eee; cursor: pointer;
-moz-box-shadow:0 0 10px rgba(0,0,0,1); -webkit-box-shadow:0 0 10px rgba(0,0,0,1); box-shadow:0 0 10px rgba(0,0,0,1);
background: -moz-linear-gradient(#eee, #bbb);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), color-stop(0.5, #bbb));
}
article > header > p:first-child a:active {
background: #888; border-color: #555;
-moz-box-shadow:0 0 10px rgba(0,0,0,1) inset; -webkit-box-shadow:0 0 10px rgba(0,0,0,1) inset; box-shadow:0 0 10px rgba(0,0,0,1) inset;
}
article > header > p:first-child span:first-child,
article > header > p:first-child span:first-child:hover { /*the triangle*/
position: absolute; top: 1.5em; left: 0.5em; z-index: 1;
border-left: 6px solid #aaa; border-bottom: 6px solid rgba(0,0,0,0);
}
article > header > p:first-child:hover span {top: 1.8em; border-left-color: #bbb;}
article > header > p:first-child:active span {border-left-color: #555;}
/* ———————————————————————————– */
{/code}