28172 sujets

CSS et mise en forme, CSS3

Transition css non-fonctionnel sur un lien avec du dégradé

Voilà j'essais de faire une belle transition sur un bouton sous forme de a (lien), mais ces liens possèdent également un dégradé fait en css.

Voilà que le tout ne fonctionne pas, je ne sais pas ce que je ne fais pas de correcte.



#acceuil a{
	
	padding:30px;
	margin:0px 10px 0px 15px;
	height:auto;
	float:left;
	color:#000;
	line-height:25px;
	
	background: rgba(244,168,113,1);
        background: -moz-linear-gradient(top, rgba(244,168,113,1) 0%, rgba(242,155,94,1) 21%,   rgba(236,106,25,1) 97%, rgba(236,106,25,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(244,168,113,1)), color-stop(21%, rgba(242,155,94,1)), color-stop(97%, rgba(236,106,25,1)), color-stop(100%, rgba(236,106,25,1)));
background: -webkit-linear-gradient(top, rgba(244,168,113,1) 0%, rgba(242,155,94,1) 21%, rgba(236,106,25,1) 97%, rgba(236,106,25,1) 100%);
background: -o-linear-gradient(top, rgba(244,168,113,1) 0%, rgba(242,155,94,1) 21%, rgba(236,106,25,1) 97%, rgba(236,106,25,1) 100%);
background: -ms-linear-gradient(top, rgba(244,168,113,1) 0%, rgba(242,155,94,1) 21%, rgba(236,106,25,1) 97%, rgba(236,106,25,1) 100%);
background: linear-gradient(to bottom, rgba(244,168,113,1) 0%, rgba(242,155,94,1) 21%, rgba(236,106,25,1) 97%, rgba(236,106,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4a871', endColorstr='#ec6a19', GradientType=0 );


	
}

#acceuil a:hover {
	
-webkit-transition: background-color 2s linear;
-moz-transition: background-color 2s linear;
-ms-transition: background-color 2s linear;
-o-transition: background-color 2s linear;
transition: background-color 2s linear;


background: rgba(199,199,199,1);
background: -moz-linear-gradient(top, rgba(199,199,199,1) 0%, rgba(101,100,100,1) 65%, rgba(48,46,46,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(199,199,199,1)), color-stop(65%, rgba(101,100,100,1)), color-stop(100%, rgba(48,46,46,1)));
background: -webkit-linear-gradient(top, rgba(199,199,199,1) 0%, rgba(101,100,100,1) 65%, rgba(48,46,46,1) 100%);
background: -o-linear-gradient(top, rgba(199,199,199,1) 0%, rgba(101,100,100,1) 65%, rgba(48,46,46,1) 100%);
background: -ms-linear-gradient(top, rgba(199,199,199,1) 0%, rgba(101,100,100,1) 65%, rgba(48,46,46,1) 100%);
background: linear-gradient(to bottom, rgba(199,199,199,1) 0%, rgba(101,100,100,1) 65%, rgba(48,46,46,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#302e2e', GradientType=0 );
color:#fff;	
	
}


Merci!
Modifié par sydgie (08 Nov 2013 - 20:23)
Pour que la transition soit effective, il faut qu'il y ai le même nombre de valeur.

Tu en as quatre sur [i]a[/b] et trois sur [i]a:hover[/b], il n'y a pas de transition possible sans correspondance des valeurs initiales.

++
Merci de votre réponse, mais je ne comprend pas bien la définition. Dois-je mettre le code de transition dans le a également avec les propriétés différentes?
bonsoir,

en fait il faut 1 correspondance par valeur pour que la transiton s'effectue, s'il en manque une, elle peut-être ajouté en doublant une, par exemple:
a {
background: linear-gradient(to bottom, 
rgba(244,168,113,1) 0%, 
rgba(242,155,94,1) 21%, 
rgba(236,106,25,1) 97%, 
rgba(236,106,25,1) 100%
);
}
a:hover {background: linear-gradient(to bottom, 
rgba(199,199,199,1) 0%, 
rgba(101,100,100,1) 65%, 
rgba(48,46,46,1) 100%,
transparent 100%
);
}

Il y a maintenant 4 valeurs qui peuvent etre recalculées Smiley smile
Cdt,
Modifié par gc-nomade (08 Nov 2013 - 21:34)
salut,
je ne sais pas si j'ai bien saisi mais si t'essayes de faire des transitions sur les dégradés je ne crois pas que ça fonctionnera car ce n'est pas encore possible. Par contre ce que dit gc-nomade m'intrigue vu qu'il a l'air de dire le contraire.
@zelalsan , exact !
en fait , j'indique, que pour être certain qu'une transition/animation ait lieu dans les navigateurs qui la supporte , il est préférable de mettre autant de valeur sur les deux états.

J'affirme cela de mémoire après avoir etait confronté a ce problème avec un element que je voulais faire pivoter et pivoter/tournoyer avec transform + quelque test avec box-shadow, je m'applique depuis a conserver cette maniere de faire pour ne pas avoir a revenir dessus. Il est vrai que les choses changent. Smiley smile

Cette maniere de faire , je la dois a IE6, avec lequel j'ai appris à ne pas provoquer les bugs que je connaissais déjà, LOL, je réalise que j'ai peut-être besoin d'une thérapie !

Cdt
Modifié par gc-nomade (09 Nov 2013 - 00:17)
Zelalsan a écrit :
salut,
je ne sais pas si j'ai bien saisi mais si t'essayes de faire des transitions sur les dégradés je ne crois pas que ça fonctionnera car ce n'est pas encore possible. Par contre ce que dit gc-nomade m'intrigue vu qu'il a l'air de dire le contraire.



Donc ça me confirme que mes doutes sur la possibilité de faire un effet de fondu sur un bouton avec un dégradé css est impossible! Je vais devoir mettre une croix dessus alors. ^^

Merci de vos réponses.
Bonjour,

non cela ne fonctionne pas, je crois que c'est parce que j'ai des couleurs bien précisent et je n'ai pas de couleur en commun entre mes deux dégradés.
J'ai changer mes couleurs un peu et là ça fonctionne, mais vu que mon bouton a du texte, la transition fonctionne seulement sur le dégradé et non sur le texte. Je trouve l'effet quand même cool, alors je vais le laisser comme ça à la limite.
Modifié par sydgie (11 Nov 2013 - 20:01)
Sujet clos
Aller à