28172 sujets

CSS et mise en forme, CSS3

Transition css3 sur background-image

Transition css3 sur background-image



bonjour

j'ai lu avec attention le tuto sur la fonction transition css3
j'essaye un truc mais ça marche pas :

mon menu à une "puce" en background-image

en gros ça donne : 

a {
background-image:url(Img/rond_fleche_off.gif);
-moz-transition-property:  background-image;
-moz-transition-duration: 500ms;
}

a:hover {
background-image:url(Img/rond_fleche_on.gif);
}


je fais mal où c'est simplement pas fait pour ça ?

(dsl pour le double post : je n'arrive pas à effacer l'ancien qui n'est pas dans la bonne section)
Bonjour Smiley smile

C'est normal que cela ne marche pas, c'est pour le moment impossible hélas. Tu peux consulter la liste du w3c pour voir ce que tu peux utiliser pour les transitions. Sinon ton code est bon ^^
Pour ce que je peux voir, ce que tu essaies de faire ressemble à une démo que j'ai déjà vu sur csstricks, si tu parles anglais cet article devrait te donner des pistes. Hélas c'est de la bidouille qui repose sur l'ajout d'html dans le code, donc à voir si tu juges cela vraiment nécessaire ^^

bonne chance
Modifié par InpIxelItrust (06 Jun 2011 - 09:31)
Administrateur
Hello,

Pour l'instant, seules les propriétés de position (background-position) ou de taille (background-size) peuvent être "transitionnées".

Tu devrais pouvoir te servir judicieusement de background-position.
effectivement, rajouter du code html pour des raisons d'apparence : pas glop, déjà que je dois dépoussiérer un code immonde fait avec les pieds, que je ne peux pas nettoyer tout comme je le voudrais (en particulier le menu dans un frameset).
Merci pour vos réponses.
Finalement j'ai opté pour une transition qui déplace la ligne de menu survolée de 10px à droite.
Je répond un peu tard mais comme je suis tombé sur ce post lorsque je cherchais une solution, je me dit qu'en postant ici l'astuce que j'ai trouvé j'aiderai ceux qui arriveront après moi.

Donc l'astuce est d'utiliser une image dans le lien et une image en fond puis de modifier l'opacité (avec une transition) de l'image.
On se retrouve avec un fading sur notre bouton.

Pour voir ce que ça donne et le code c'est ici: background transition css3
Hello,

j'ai essayé également de modifier le background-image avec les transitions, mais comme ça n'existe pas pour le moment j'ai regardé la solution de maniT4c.

Mais en ce moment je travaille sur un projet et je teste le framework knacss. Donc, étant donné que je travaille en RWD il me fallait une solution qui s'adapte en cas de redimensionnement du site.

Donc en m'inspirant de la solution de maniT4c ma solution n'est pas d'utiliser l'opacité pour afficher le background car en RWD le background ne s'adapte pas au redimensionnement à moins d'utiliser 
background-size:cover;
mais ça ne marchera pas pour les anciennes versions de navigateurs.

L'idée est donc d'utiliser deux images positionnées l'une sur l'autre. Lors du hover, la première devient transparente et laisse apparaitre la seconde. La solution existait peut être ailleurs mais bon je la poste quand même au cas où !

Code HTML :


<body>
     <p>
          <a class="logo" href="#" title="Retour à l'accueil">
               <img class="imgtest1" src="images/logo.png" alt="Logo"/>
               <img class="imgtest2" src="images/logo-hover.png" alt="Logo"/>
          </a>
     </p>
</body>


Code CSS:

body{
	background:#000;
}
img{
	max-width:100%;
	border:0;
}
.logo{
	display:block;
	position:relative;/* on positionne le conteneur*/
}
.imgtest1{
	filter : alpha(opacity=100); /* pour ie<9, pas de transition mais ça fonctionnera comme une image survolée classique*/
	opacity:1; 
	transition:opacity 0.5s ease-in-out;
	-moz-transition:opacity 0.5s ease-in-out;
	-o-transition:opacity 0.5s ease-in-out;
	-ms-transition:opacity 0.5s ease-in-out;
	-webkit-transition:opacity 0.5s ease-in-out;
	position:relative;
	z-index:110;
}
.imgtest2{
	position:absolute;
	top:0px;
	left:0px;
	z-index:100;
}
.imgtest1:hover{
	filter : alpha(opacity=0);
	opacity:0;
}
Sujet clos
Aller à