Infobulle sans javascript full CSS avec transparence

Tooltip test 1!Contenu de l’infobulle 1

Tooltip test 2!Contenu de l’infobulle 2

Les infobulles sont très vulgarisé sur le web, mais la particularité de notre infobulle, c’est qu’il sera 100% CSS, appuyé par les transformations et les transitions CSS.
Donc on n’utilisera pas de javascript ni d’autres frameworks.

La structure HTML

Voici notre structure HTML très simple : un paragraphe qui va contenir un lien et un span.

Mise en forme des liens

Pour avoir un bon rendu, on va styliser les liens (couleur, ombre sur texte), puis sur les différentes états : en hover et focus.
Le RGBa va nous aider pour avoir l’effet de transparence, mais attention, ce n’est pas reconnu par tous les navigateurs.

Mise en forme de la popup

La popup doit se mettre sur le texte, on est donc obligé de le mettre en position absolu, puis ajouter des margin pour gérer le décalage.

Enfin, on va ajouter le fond, couleur, bordure arrondi

Utilisation des transformations et des transitions

Pour commencer, on va transformer notre span à une échelle à 0 et faire une rotation de -12deg

Puis lors du hover (du focus) sur le lien, on modifie la transformation à une échelle de 1 et inverser la rotation à 0deg.

Enfin, pour avoir du plus bel effet entre les deux états, on applique la transition CSS3 sur les span, en appliquant l’animation sur toutes les propriétés (all) et qui durera 1/4 de seconde.

Effet de transparence

Lors du changement d’état, on va jouer sur l’effet de transparence de 0 à 1 et inversement.

Répondre