Trucs et Astuces CSS
Chapitre 2 : Interface et menus
Retour Accueil CSS
20 Infobulles personnalisées
Termes CSS clés employés : transform:scale(), radial-gradient,
text-shadow,box-shadow, transition, :focus.
Compatibilité navigateurs : Compatibilité navigateurs : IE10+, Firefox16+,
Opera12.5+. Chrome et Safari avec le préfixe -webkit-.
Problèmatique
L’élément HTML img dispose d’attributs permettant d’afficher soit une description
(attribut title), soit un texte alternatif (attribut alt) affiché lorsque l’image ne peut pas l’être.
|
 |
| IMG src="adresse_image" title="Capitaine nain" alt="Capitaine nain" |
IMG src="adresse_erronee" title="Capitaine gobelin" alt="Capitaine gobelin" |
Le comportement varie toutefois selon les navigateurs. S’il est possible de jouer sur la mise en forme du texte affiché, le comportement reste figé et prévisible. Le but est ici de créer une infobulle donnant une description mieux mise en valeur.
Résolution théorique
L’élément img ne permettant pas de spécifier de texte (autre que celui des deux attributs déjà cités),
il faudra l’inclure dans un élément conteneur div. L’attribut title ne sera pas employé :
le texte de l’infobulle à afficher sera placé dans un élément span, affiché uniquement
lors le pointeur est au-dessus de l’élément conteneur.
Résolution pratique
Le code HTML est évident :
<div class="conteneur">
<img src="adresse image" alt="texte alternatif">
<span>Contenu de l’infobulle</span>
</div>
Remarquez que l’infobulle pourrait donc contenir du texte, une image ou un contenu mixte.
Une souplesse dont sont dépourvu les attributs title etalt.
Commençons par définir l’élément div conteneur. Rien de particulier…
div.conteneur {
margin: 20 auto;
width: 18rem;
height: 18rem;
color: navy;
}
Passons ensuite à son élément enfant. Il possède une position absolue, ajustée ici en bas de l’image
à l'aide de la propriété margin. Un léger décalage permettra au contenu d’être un peu éloigné
des bords de l’infobulle.
div.conteneur span{
position:absolute;
margin-top:6.5rem;
margin-left:-15.4rem;
padding: .3rem;
Nous ajoutons ensuite les propriétés fondamentales de l’infobulle : l’alignement du texte, sa couleur,
un ombrage du texte ainsi que de la boîte de l’élément, une bordure à coins arrondis et un fond en
dégradé radial partant à 45° du coin supérieur gauche. C’est la partie cosmétique que vous pourriez
(et devriez) modifier selon vos goûts ou vos besoins.
}
div.conteneur span{ >
…
text-align:center;
color:navy;
text-shadow:0 2px 0 black;
box-shadow: 10px 10px 5px #888;
border: 1px;
border-radius: 15px;
background: radial-gradient(0px 0px, #043152, #B1E1F0);
}
Enfin, nous définissons une transformation initiale avec une taille nulle et une rotation de 15 degrés, un
temps de transition de 0,3 seconde, ainsi qu’une transparence totale : initialement, l’infobulle n’est
pas affichée.
div.conteneur span{
…
transform:scale(0) rotate(-15deg);
transition:all .3s;
opacity:0;
}
Vient enfin la dernière partie : lorsque le pointeur est sur l’élément div ou que celui-ci possède le
focus, nous redonnons à l’élément sa taille normale et l’affichons sans rotation avec une transparence
nulle.
div.conteneur:hover span, div.conteneur:focus span{
transform:scale(1);
opacity:1;
}
Capitaine nainLeader des nains bleus type Moria
Fyndhorn Elder 2006
Cette technique est ici appliquée à un élément IMG contenu dans un DIV conteneur, mais vous devinez aisément qu’elle pourrait l’être à n’importe quel élément pour un but quelconque : un menu, des boutons, etc…
Retour Accueil CSS
|
|---|