Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Auteur
Sls
#
Citer
8 Posts
Bonjour,

Je veux créer un effet de transition CSS3 avec transition. Tout ce passe très bien excepté quand je veux l'appliquer à des background.

li.next-page {
  height: 26px;
  width: 26px;
  background: url("image/next_page.png") no-repeat;
  text-indent: -7000px;
  }
	
     li.next-page:hover {
       background: url("image/next_page_hover.png") no-repeat;
       -webkit-transition: background 0.2s ease-out;
       transition: background 0.2s ease-out;
     }


D'où peut venir ce satané problème qui se présente sur tous les background de ma CSS ? sweatdrop

PS : J'ai volontairement retiré -o-transition et -moz-transition pour plus de clarté ici !
Modifié par Sls (31 Jan 2012 - 18:32)

^
Sls
#
Citer
8 Posts
smile

^
neelo
#
Citer
13 Posts
Je dis peut-être une bêtise mais la transition tu ne dois pas le mettre sur le :hover !
Je n'ai pas testé mais essaie !

li.next-page {
height: 26px;
width: 26px;
background: url("image/next_page.png") no-repeat;
text-indent: -7000px;
-webkit-transition: background 0.2s ease-out;
transition: background 0.2s ease-out;

}

li.next-page:hover {
background: url("image/next_page_hover.png") no-repeat;
}
Modifié par neelo (05 Feb 2012 - 19:40)

^
fvsch
#
Citer
20100 Posts
Bonjour,

À ma connaissance les navigateurs ne font pas d'effet de transition entre deux background-image. Quel traitement serait attendu? Une diminution progressive de l'opacité du premier background et une incrémentation de l'opacité du second? Difficile à réaliser pour un navigateur vu qu'un background-image n'a pas d'opacité propre.

Il y a plusieurs astuces pour obtenir le même effet en utilisant un pseudo-élément affiché en «fond» de l'élément et en jouant sur son opacité, ou encore en utilisant des couleurs RGBA. Dans tous les cas ça demande d'avoir deux éléments (ou un élément et un pseudo-élément), avec l'image final en fond de l'élément principal et l'image ou couleur de départ en fond de l'élément en surimpression. Voir un exemple parmi d'autres (on en trouvera sans doute de meilleurs avec une petite recherche).
Modifié par fvsch (06 Feb 2012 - 15:38)

http://fvsch.com 
^