De l'ombre pour IE

Bonjour,
voilà a quoi pourrait ressembler mon site (sans contenu) : http://ouvriers.free.fr

Je tiens vraiment aux dégradé noir sur les coté (que j'ai fait avec des image png, et une astuce pour que IE le reconnaisse aussi)
Voila l'astuce
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='Graph/ombreBody.png', sizingMethod='scale' );
Mon probleme c que cette astuce tue les liens de ma page sous IE ... les png sont bien interpreté comme tel (et transparent) mais on ne peu plus clické sur les liens (par contre des que je l'enleve on peut)...

Y a t'il une autre facon de faire de l'ombre sur ma div (de la meme facon qu'actuellement) mais pas avec du png ?

Y a t il une autre maniere pour forcé la transparence sous IE sans tuer mes liens ?

Merci

salut,

voila la seule façon de faire du transparent en png avec IE, c'est de passer ta palette png en couleur indexées...
C'est transparent mais le degradé est dégradé aussi... (dsl pour le vieux jeu de mot)

Khaan a écrit :
voila la seule façon de faire du transparent en png avec IE, c'est de passer ta palette png en couleur indexées...
C'est transparent mais le degradé est dégradé aussi... (dsl pour le vieux jeu de mot)

Oui, enfin c'est transparent, mais sans transparence graduelle.
Le PNG32 avec transparence graduelle (ou translucidité), il y a divers trucs pour le faire marcher, mais c'est compliqué, ça crée des distorsions dans le code, etc. Un article qui recensait ces différentes techniques de bidouillages concluait en disant qu'il n'y avait pas vraiment de moyen pour avoir le transparence PNG sous IE6 (à part bien entendu la transparence binaire en PNG8, ce qui revient à faire du GIF en PNG…).

Sinon, tu peux simuler la transparence, en utilisant des images pour tes bordures qui ont déjà un fond qui sera raccord avec ton fond de page.

http://www.cssplay.co.uk/menus/drop_variation.html

Un PNG appliqué tout à fait normal et ça fonctionne sous IE.
C'est pas une transparence graduelle sinon, c'est une transparence constance de 85% environ.

Un cours sur les PNG avec Photoshop CS serait bon, parce que j'ai tenté de reproduire ce PNG et je n'ai pas réussi. J'ai tenté de le télécharger et IE a planté ^^ !

Enfin bref... pourquoi pas un bon tutoriel. Quelqu'un en connait un ?
J'en ai vu mais jamais de clair et précis, imagé et sous Photoshop.
Modifié par D@n!eL_ (06 May 2006 - 22:46)

Bonsoir.
Une chose est encore à prendre en compte: "le seuil des 64px" Il résulte de cette expérience qu'une image PNG de moins de 64 pixels (au carré) est traitée comme un jpeg, à la taille supérieure de 65px est traitée comme un PNG… translucidité à l'appui, qui le fait bien et qui est belle.
C'est difficile à croire, j'ai posté ce truc l'an dernier sans aucune réponse.
transparence PNG sujette à la taille avec IE
Modifié par Aureance (06 May 2006 - 23:29)

D@n!eL_ a écrit :
Un cours sur les PNG avec Photoshop CS serait bon, parce que j'ai tenté de reproduire ce PNG et je n'ai pas réussi.

Un cours sur quoi exactement ? Parce que faire du PNG-32, c'est pas plus compliqué que de faire du TIFF ou n'importe quel autre format, c'est juste un format d'enregistrement qui applatit les calques mais préserve la couche alpha de l'image résultante.

Je ne sais pas si des tutoriels existent sur Photoshop et le PNG. Vu que j'utilise Gimp, je ne m'en suis jamais vraiment soucié…

mpop a écrit :
Un cours sur quoi exactement ?

Le nombre de format de PNG, comment les faire dans chacun des cas sous Photoshop et leur compatibilité par rapport à chaque navigateur et la façon dont ils ont été sauvegardés.
On voit un tutoriel qui explique les formats et on peut occasionnellement en voir un autre qui nous dit que ce n'est pas compatible sous IE.
Mais à part ça, quand tu débutes sous Photoshop et que tu veux une transparence de 80% en format PNG... dur dur !
Modifié par D@n!eL_ (07 May 2006 - 05:33)

D@n!eL_ a écrit :
Mais à part ça, quand tu débutes sous Photoshop et que tu veux une transparence de 80% en format PNG... dur dur !

Ben disons que ça marche pareil que pour faire une transparence de 80% tout court (en PSD ou Tiff ou autre).

Le nombre de format : 2

1 – le PNG-32 = 24 bits de couleur + 8 bits de couche alpha (transparence graduelle, de 0=transparent à 255=opaque). Format RVB compressé mais sans dégradation des pixels. Généralement plus lourd que le JPEG pour des images complexes, plus léger pour des formes géométriques et des aplats de couleur.
Implémenté par tous les navigateurs graphiques sauf Internet Explorer 6 et inférieur. IE6 utilise la transparence de l'image, mais par rapport à un fond de couleur (soit la couleur de fond souhaitée et enregistrée avec l'image, soit par défaut un gris moyen). Le rendu final est donc opaque.

2 – le PNG-8 = 8 bits de couleurs indexées (de 1 à 255 couleurs possibles dans la palette). Pour chaque pixel, permet une transparence totale ou une opacité totale uniquement (transparence binaire). Format très comparable au GIF, mais souvent plus efficace car il intègre des routines de compressions.
Implémenté par tous les navigateurs graphiques sans exceptions.


Voilà, en bref.
Pour photoshop, son intégration de PNG n'est pas tip top. Il faut croire qu'Adobe n'est pas fan des formats ouverts…
Il existe néanmoins un plugin pour optimiser tout ça : http://www.fnordware.com/superpng/

Comme je le disais, je n'ai pas Photoshop, donc je ne pourrais pas réaliser un tutoriel. Si je le faisais, ça serait pour Gimp.

J'oubliais ça :

– enregistrer une image en couleurs indexées en PNG = PNG-8 ;
– enregistrer une image RVB en PNG = PNG-32.

Edit :
Après vérification, on ne parle pas de PNG-32 mais de PNG-24, en référence au codage de la couleur. Une image en PNG-24 a bien 24 bits pour la couleur (un octet de rouge, un octet de vert et un octet de bleu, soit 3 × 8bits = 24bits), et peut également avoir une couche alpha (sur 1 octet soit 8bits par pixel). Mais on utilise la valeur 24 en référence au nombre de couleurs.
De plus, il me semble qu'il est possible de ne pas enregistrer de couche alpha, donc 24 est le dénominateur commun entre le PNG-24 sans couche alpha et le PNG-24 avec couche alpha…

Le plugin fonctionne bien, je le sais... mais je n'y avais pas accès lors d'un concours !
J'ai compensé avec un filtre particulier de Microsoft, mais c'est pas top.