Souscrire
Blog iamvdo.meVoici un exemple de réalisation de popup avec l’utilisation de CSS. Suivez le tutoriel pour recréer cet effet.
Le balisage
Voici le code HTML utilisé : un simple paragraphe, composé d’un lien, lui même contenant un span.
<p>
<a href="#">Hover Me!
<span>I'm a popup...</span>
</a>
</p>Mettre en forme les liens
Ajoutez d’abord les styles CSS sur les liens (couleur, ombre sur texte), puis sur les liens hover et focus.
a{
color:#ccc;
text-shadow:0 -1px 0 black;
}
a:hover,a:focus{
background:rgba(0,0,0,.4);
box-shadow:0 1px 0 rgba(255,255,255,.4);
}J’utilise rgba pour gagner du temps, mais attention, ce n’est pas reconnu dans tous les anciens navigateurs.
Mettre en forme la popup
Par défaut, une popup doit apparaitre en superposition par rapport au texte, donc un positionnement absolu s’impose.
a span{
position:absolute;
}On positionne : j’utilise margin pour un positionnement par rapport à sa position normale dans le flux (c’est à dire sans le position:absolute). Cela permet de gérer un décalage relatif.
a span{
...
margin-top:23px;
margin-left:-35px;
}Puis, je mets en forme...
a span{
...
color:#09c;
background:rgba(0,0,0,.9);
padding:15px;
border-radius:3px;
box-shadow:0 0 2px rgba(0,0,0,.5);
}Utilisation des transformations et des transitions
J’ajoute en premier lieu la transformation au span. Une échelle à 0 et une rotation de -12deg.
a span{
...
transform:scale(0) rotate(-12deg);
}Lors du hover (et du focus) sur le lien, je modifie la transformation du span. J’applique une échelle de 1 et une rotation de 0deg.
a:hover span, a:focus span{
transform:scale(1) rotate(0);
}Puis, pour créer un joli effet entre les deux états, j’applique en CSS la transition sur les span, en précisant que je souhaite animer toutes les propriétés (all) et que l’effet dure 1/4 de seconde.
a span{
...
transition:all .25s;
}Effet de transparence
Pour ajouter l’effet de transparence, il suffit d’ajouter une opacité de 0 sur les span, puis de modifier cette opacité à 1 lors du changement d’état. L’effet sera appliqué progressivement grâce à la règle transition appliquée précédemment.
a span{
...
opacity:0;
}
a:hover span, a:focus span{
...
opacity:1;
}L’effet est donc finalisé. Adaptez ensuite à votre convenance au niveau des transformations, de la durée des transitions...
Laissez vos commentaires sur le tutoriel plus bas !
#1par L44, le 8 octobre 2011
Pas mal ! Surtout l’animation.
Sauf que c’est pas des popups mais plutot des infobulles...
#2par css3create, le 9 octobre 2011
@L44:c’est vrai ! Du coup, j’ai mis à jour le nom de l’article. Merci.
#3par Dreamer, le 22 octobre 2011
Il semblerait que ce tutoriel ne fonctionne pas sur IE8, avez-vous une solution ou un hack pour que ceci fonctionne !!
Merci.
#4par afrika1043, le 20 novembre 2011
Merci pour le tuto ! mais comment on fais pour avoir aussi la petite flèche en dessus de l’info bulle ?
#5par css3create, le 20 novembre 2011
@afrika1043 : vous pouvez regarder cet article : Boutons Suivant Précédent
#6par Geoffrey, le 25 novembre 2011
Hello,
@Dreamer : voici une technique qui fonctionne sous IE8 http://www.alsacreations.com/astuce...
Il va cependant falloir mixer entre les deux techniques, et trouver un compromis pour avoir des infobulles qui fonctionnent partout.
Peut-être voir du côté des commentaires conditionnels : http://www.alsacreations.com/astuce...
#7par Del, le 21 décembre 2011
Salut,
Avant tous super tutoriel, beau rendu, belle effet, par contre tu as oublier
de précisez dans le css (a span ::before) avec les instructions associés j’ai
du chercher vite fait sur ton site le css qui relie à ce tuto. Voila sinon très
beau résultat.
Cordialement Del