Des infobulles en CSS3

Version imprimable

27/06/2012, 13h13
Bovino

Des infobulles en CSS3

:salut:

Je vous propose une traduction de l'article anglophone CSS3 tooltips : Des infobulles en CSS3.

Cet article vous montre comment réaliser des infobulles élégantes en utilisant uniquement CSS3.

N'hésitez pas à faire part de vos remarques ou commentaires concernant cet article.

:fleche: Des infobulles en CSS3.

:merci:
27/06/2012, 23h17
Muchos

Intéressant et visuellement réussi ^^
Mais ça ne me semble pas bon question accessibilité, puisqu'un lecteur d'écran mêle le contenu de l'infobulle au flux du texte.

Pour l'accessibilité et garder la sémantique du html, est ce que quelque chose de ce genre ne serait pas plus acceptable :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<style type="text/css">
a[title]:hover:after
{
  content: attr(title);
  z-index: 999;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
</style>
<a href="#" title="Votre description personnalisée">
  Votre texte
</a>
</html>

cf. http://stackoverflow.com/questions/2...the-anchor-tag

28/06/2012, 14h11
alex_vino

Bon tuto, merci :ccool:
29/06/2012, 02h25
ibrakola

merci pour ce beau tuto,
c'est vraiment magnifique.

Citation:

Pour l'accessibilité et garder la sémantique du html, est ce que quelque chose de ce genre ne serait pas plus acceptable

heu, personnellement je dirais que oui.
:)
29/06/2012, 04h15
Muchos

Citation:

Envoyé par ibrakola

heu, personnellement je dirais que oui.

Non non ! Son post n'a aucun sens ^^