28173 sujets

CSS et mise en forme, CSS3

Bonjour les gens, ( j'ai vu ca ailleurs aujourdh'ui , j'aime bien la formule Smiley lol )

Je voudrais obtenir un effet sur des images en niveaux de gris, qui lorsqu'on amène le curseur dessus reprennent leurs couleurs (en l'occurence c'est pour un portfolio).

j'ai vu que filter:gray , propriété spécifique a IE permettait de gérer ca....mais ce n'est pas interopérable.

J'ai bien pensé gérer ca avec les CSS mais ça fait pour chaque illustration dans le portfolio ,indiquer 2 images , une pour le comportement normal et une pour le comportement associé à la pseudo-classe :hover.

En plus , il est évident que les illustrations dans le portfolio vont évoluer avec le temps. Je pourrais rendre dynamique ma feuille de styles pour récupérer les noms des images dans des variables en php mais avant ca , je préfères lancer la question ici.

Y-a-til une technique ou uns astuce plus simple, sans javascript et conforme aux standards pour obtenir ce genre d'effet?

Merci pour vos réponses !
Modifié par RoseGrenouille (09 Mar 2007 - 19:16)
Salut,

Non, en css seule image (n&b+couleur une sous l'autre ou à côté de l'autre) et juste un positionnement différent du background en hover.
Bonjour,

ghost a écrit :

Non, en css seule image (n&b+couleur une sous l'autre ou à côté de l'autre) et juste un positionnement différent du background en hover.


Ce qui suppose que les images de contenu seront gérées en background CSS, donc non accessibles.

Plus simplement, et sans avoir à générer une double image, le même effet peut être obtenu de manière accessible en jouant sur opacity Smiley cligne
opacity est une propriété CSS3, en effet. Cependant, le module CSS3 "color" est au stade des implémentations (candidate recommandation). Il est d'ailleurs pris en compte par le validateur W3C.

Par ailleurs, un "nom de propriété" de ce type, même formellement invalide, est inoffensif (contrairement à une syntaxe invalide).