Animation ne marche pas sur une infobulle en css3
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Animation ne marche pas sur une infobulle en css3
Bonsoir à tous
Je cherche depuis quelques temps à faire des infobulles en css3, j'ai testé un tuto trouvé sur ce site :
http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS
J'ai suivi toutes les étapes, les infobulles noires s'affichent bien sur mon site, mais aucun effet de transition si animation, tout s'anime comme de bêtes infobulles.
Voici mon code HTML et mon CSS pour ceux qui se poseraient la question
Un grand merci par avance, je n'ai rien trouvé pour résoudre ce problème jusqu'à présent :/
Je cherche depuis quelques temps à faire des infobulles en css3, j'ai testé un tuto trouvé sur ce site :
http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS
J'ai suivi toutes les étapes, les infobulles noires s'affichent bien sur mon site, mais aucun effet de transition si animation, tout s'anime comme de bêtes infobulles.
Voici mon code HTML et mon CSS pour ceux qui se poseraient la question
- Code:
<a class="bullenoir" href="http://once-upon-a-time.1talk.net/u2"><img src="http://img11.hostingpics.net/pics/789460ouatpa201.png" />
<span>Super Admin</span>
</a>
- Code:
a.bullenoir span{
position:absolute;
opacity:0;
margin-top:23px;
margin-left:-35px;
color:#09c;
background:rgba(0,0,0,.9);
padding:15px;
border-radius:3px;
box-shadow:0 0 2px rgba(0,0,0,.5);
transform:scale(0) rotate(-12deg);
transition:all .25s;
}
a.bullenoir:hover span, a.bullenoir:focus span {opacity:1; transform:scale(1) rotate(0); }
Un grand merci par avance, je n'ai rien trouvé pour résoudre ce problème jusqu'à présent :/
Dernière édition par Cinderella. le Ven 11 Mai 2012 - 8:22, édité 1 fois
Cinderella.- ***
-
Messages : 125
Inscrit(e) le : 13/03/2011
Re: Animation ne marche pas sur une infobulle en css3
hmm je mettrais une virgule entre "a.bullenoir" et "span".
Ou bien
- Code:
a.bullenoir, span{
...
}
Ou bien
- Code:
<a class="bullenoir" href="http://once-upon-a-time.1talk.net/u2"><img src="http://img11.hostingpics.net/pics/789460ouatpa201.png" />
<span class="bullenoir">Super Admin</span>
</a>
- Code:
.bullenoir{
...
}
Re: Animation ne marche pas sur une infobulle en css3
Bonsoir
Ca peut venir de ton navigateur je crois.
J'avais un effet de transition, et j'ai dû rajouter des balises spécifiques aux navigateurs :
webkit-transition:
-moz-transition:
-o-transition :
Donc teste voir ainsi. Pour le reste, si cela ne suffit pas, je ne peux pas t'aider.
Ca peut venir de ton navigateur je crois.
J'avais un effet de transition, et j'ai dû rajouter des balises spécifiques aux navigateurs :
webkit-transition:
-moz-transition:
-o-transition :
Donc teste voir ainsi. Pour le reste, si cela ne suffit pas, je ne peux pas t'aider.
Re: Animation ne marche pas sur une infobulle en css3
Merci pour cette réponse rapide
Dans le premier cas, il me modifie tous mes <span> (dans ma PA) et non uniquement le <span> lié à la class "bullenoir".
Dans le deuxième cas, il me supprime mon image porteuse du lien <a>
Merci tout de même pour ces idées
Bloody Hope : J'ai ajouté ces préfixes sur toutes mes valeurs, et il me semble que ça marche
Un grand merci
Le seul élément qui ne marche toujours pas est le bout de la bulle (comme une bulle de BD) ici http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS
Dans le premier cas, il me modifie tous mes <span> (dans ma PA) et non uniquement le <span> lié à la class "bullenoir".
Dans le deuxième cas, il me supprime mon image porteuse du lien <a>
Merci tout de même pour ces idées
Bloody Hope : J'ai ajouté ces préfixes sur toutes mes valeurs, et il me semble que ça marche
Un grand merci
Le seul élément qui ne marche toujours pas est le bout de la bulle (comme une bulle de BD) ici http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS
Cinderella.- ***
-
Messages : 125
Inscrit(e) le : 13/03/2011
Re: Animation ne marche pas sur une infobulle en css3
De rien
Comme dit, pour autre chose je suis incapable de t'aider, donc je pense qu'une personne plus compétente passera bientôt t'aider =).
Comme dit, pour autre chose je suis incapable de t'aider, donc je pense qu'une personne plus compétente passera bientôt t'aider =).
Re: Animation ne marche pas sur une infobulle en css3
Bonjour
Essayez en rajoutant ceci dans le CSS pour le petit triangle.
Essayez en rajoutant ceci dans le CSS pour le petit triangle.
- Code:
a span::before{
content:'';
position:absolute;
top:-6px;
left:10px;
width:0;
height:0;
border-bottom:6px solid rgba(0,0,0,.9);
border-left:6px solid transparent;
border-right:6px solid transparent;
}
Re: Animation ne marche pas sur une infobulle en css3
C'est parfait !
Merci beaucoup à tout ceux qui m'ont aidé dans mes démarches, le sujet est résolu.
Merci beaucoup à tout ceux qui m'ont aidé dans mes démarches, le sujet est résolu.
Cinderella.- ***
-
Messages : 125
Inscrit(e) le : 13/03/2011
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum