28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Ayant eu des problemes avec IE6 et les png (comme tout le monde) j'ai découvert (comme tout le monde) cette méthode qui fonctionne à merveille.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='blank.gif', sizingMethod='scale')

Or mes images en png sont en fait du texte fait sous photoshop, et à ma grande surprise, ce filtre non seulement regle mon probleme de transparence mais améliore également sensiblement la qualité d'image par rapport à Firefox où le moindre changement de proportion pour l'image la pixelise. Je pense ke lavantage d'IE vient en effet du sizingMethod='scale'.
Seulement ce code n'est reconnu par IE, ma question est donc simple :
Existe-t-il un filtre équivalent applicable à Firefox ?
Merci de vos réponse


PS : je pourrais faire des captures démontrant les différences de qualité d'image. c'est vraiment flagrant.
nounours_32 a écrit :
(…) par rapport à Firefox où le moindre changement de proportion pour l'image la pixelise.

Que veux-tu dire par là? Est-ce que tu redimensionnes tes images via les attributs width et height de ta balise d'insertion d'images?
Modifié par Benjamin D.C. (03 Apr 2008 - 00:01)
a écrit :
Existe-t-il un filtre équivalent applicable à Firefox ?


La notion de filtre n'est pas standard. Firefox gère les PNG nativement mais en effet si tu le redimensionnes ca fait du pixel. Dans ce cas il vaut mieux faire ton image sur Photoshop directement à la bonne taille.

Les filtres IE sont une bizarrerie exotique présente pour combler les lacunes du navigateur et ajouter des effets sur des éléments qui n'ont rien d'indispensables, et font en fait appel à DirectX (ce qui explique surement l'anti-aliasing appliqué à ton image après redimensionnement).

Le soucis est que tu prend le problème à l'envers. Ce filtre peut servir comme correctif pour la prise en charge de PNG avec transparence sous IE alors que tu cherches à trouver une solution pour imiter le comportement de ce filtre.

La solution la plus simple pour régler ton problème est de tailler directement ton image aux bonnes dimensions pour ne pas avoir à la redimensionner.

Une URL peut-etre pour en savoir plus sur ton problème?
merci de vos réponse.
Seulement jai réalisé un design complétement redimensionnable selon la taille de la fenetre. Donc je ne peux pas la dimensionner une bonne fois pour toute. Tu as bien compris le probleme skywalk3r cest simplement la redimension (pas forcément en plus gros dailleurs) qui la déforme un peu. Imaginez que l'image est un texte "Entrer" de travers et souligné, donc une quelconque redimension fait un aliasing notamment sur le soulignage.

J'hésite un peu à mettre l'url du site, il va correspondre à une partie du travail de fin d'étude de ma soeur et je ne tiens pas trop à le diffuser de cette maniere. En revanche je peux copier le code si vous voulez.


EDIT : Question différente mais pas tout à fait hors sujet, je ne sais pas si vous avez essayé Safari 3 mais ce navigateur me donne l'impression dappliquer l'effet IE directX sur toute la page tellement la qualité d'image globale est meilleure (tout est parfaitement lissé). Une idée de ce qui s'y passe ?
Modifié par nounours_32 (03 Apr 2008 - 13:12)
Bonjour,

À l'heure actuelle, la capacité des navigateurs à redimensionner une image en effectuant un sous-échantillonage un peu fin (bref, lisser le rendu) est très limitée. Internet Explorer permet effectivement d'utiliser la librairie graphique DirectX, ce qui peut donner de bons résultats, mais passer par AlphaImageLoader est assez lourd et peut être problématique.

La situation va sans doute s'améliorer progressivement. À l'heure actuelle, les dernières versions des navigateurs proposent toutes une fonctionnalité de zoom graphique sur les pages (à l'exception peut-être de Safari? est-ce intégré à la version 3 ou 3.1?), ce qui veut dire que les utilisateurs sont amenés à agrandir ou rétrécir des images en même temps que le reste de la page... et le navigateur qui proposera le zoom le plus performant graphiquement (meilleur lissage des images) sans trop pomper sur le processeur de l'utilisateur aura un léger avantage concurrentiel.
Mais pour l'instant il est assez difficile de designer un site en comptant sur un redimensionnement correct des images côté client (navigateur).

nounours_32 a écrit :
EDIT : Question différente mais pas tout à fait hors sujet, je ne sais pas si vous avez essayé Safari 3 mais ce navigateur me donne l'impression dappliquer l'effet IE directX sur toute la page tellement la qualité d'image globale est meilleure (tout est parfaitement lissé). Une idée de ce qui s'y passe ?

Ils ont amélioré les capacités de lissage des images de leur navigateur.
Florent V. a écrit :
Bles dernières versions des navigateurs proposent toutes une fonctionnalité de zoom graphique sur les pages (à l'exception peut-être de Safari? est-ce intégré à la version 3 ou 3.1?)

Non, toujours pas. Smiley decu
merci pour ta réponse Florent V. ainsi qu'aux autres j'en sais désormais plus sur le sujet. Pour mon cas particulier, rien de grave le rendu reste tout à fait correct sous Firefox donc le site restera en l'état.
à bientot (bah oui je nai pas fini donc jaurais encore des questions ^^).