Image à bords arrondi

Bonjour,
je débarque sur Alsacreations et suis émerveillé mais un peu perdu.

J'aurai besoin d'un conseil pour une image à bords arrondis avec
ombrage.

C'est très urgent et la je bloque.

je voudrais faire un masque qui comprends les bords de l'image et
l'ombre. pour des raisons de compatibilité avec ie6 il faut du gif
transparent.

et par derriere ce "masque" je placerai l'image d'un produit.

D'avance merci pour vos conseils.
j'espère ne pas vous importuner avec ma question qui pourra certainement
vous paraitre basique mais je débute sur dreamweaver et tente de me perfectionner en CSS.
Modifié par fullpixel (28 Aug 2008 - 15:55)

Bonjour,

pourquoi ne pas employer le pngfix et un masque en png ?

Je viens de voir ce que c'est.
je ne connaissais pas.
Si j'ai bien compris c'est une partie de code à inclure dans mes feuilles de style pour permettre à IE 6 de lire le png ?
C'est ça ?
Modifié par fullpixel (28 Aug 2008 - 15:54)

Si cela peut t'aider, il y a un article t'aidant a faire des ombrages pour image sur alistapart.
http://www.alistapart.com/articles/cssdropshadows/ (anglais)

Euh, en fait, la version la plus stable est en javascript (je vais encore me faire incendier ), me semble-t-il.

Pour faire simple, ça rajoute dynamiquement un style à une image PNG. Cela fonctionne bien avec les images mais pas avec les backgrounds. Il existe d'autres script pour les background mais je n'ai jamais trouvé de solution stable (je n'ai pas cherché très longtemps non plus...).

Pour le java script il me semble que mon prof m'avait parlé de ça mais aussi me le déconseillait-il car certains utilisateurs désactivent le java script pour éviter les ralentissements pendant leur surf.


j'ai trouvé une solution appremment:

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

Connaissez-vous cet exemple ?

Merci de vos aides précieuses.
Modifié par fullpixel (28 Aug 2008 - 18:42)

fullpixel a écrit :
j'ai trouvé une solution appremment:

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

Connaissez-vous cet exemple ?

Oui. Il s'agit là encore d'un script JavaScript qui effectue ce type de modifications automatiquement:
- pour les images de fond, et pour IE, supprimer l'image de fond (background) et la remplacer par un filtre AlphaImageLoader;
- pour les images dans le code HTML: supprimer l'image HTML, et la remplacer par un DIV ou autre élément auquel on applique un filtre AlphaImageLoader.

Pour les filtres AlphaImageLoader, que l'on peut utiliser «manuellement» (ce que je conseille ici pour un usage ponctuel et que l'on souhaite maitriser), voir la FAQ à ce sujet.

Pour la demande initiale, par contre, impossible de dire si une image en PNG-24 est nécessaire, si du GIF ou PNG-8 peuvent suffire, ou encore quel est l'âge du capitaine, sans avoir vu à quoi ça doit ressembler.

Merci beaucoup à tous

Salut,

le PNG-8, dans le cas d'un ombrage, donnera les mêmes résultats qu'un GIF. Si la couleur de fond est clairement définie, pas de problème, à priori. Dans le cas contraire, le PNG-24 reste la meilleure solution.

Il existe aussi le PNG-8 avec 256 niveaux de transparence qu'IE6 considère comme un PNG-8 standard (il ne bugge donc pas).
PNG8 - The Clear Winner (Sitepoint)

Seul problème: seuls Fireworks et pngnq savent créer ces PNG-8 spéciaux

oui connais bien le problème dernièrement un dégradé de 7 px autour d'une de mes rollovers en css suite aux ombres portées que j'avais faites sous Illustrator j'ai opté pour le png 24 bien meilleur en qualité d'ailleurs.
Modifié par Gil88 (29 Aug 2008 - 15:52)

a écrit :
j'ai opté pour le png 24 bien meilleur en qualité d'ailleurs

Mais moins compatible : IE6 (encore majoritairement répandu) et inférieurs ne le gèrent pas, et ça peut détruire ton design. Le lien de Felipe est très intéressant et pourrait te permettre de réduire les dégats

ben justement j'ai fait mes essais en local sous IE6 et je vois pas le problème comment çà il ne le gère pas ?

Si ça marche, tant mieux
Mais demande quand même à quelqu'un d'autre de vérifier, au cas où... et avec IE6 natif, de préférence

superjun a écrit :
j'ai opté pour le png 24 bien meilleur en qualité d'ailleurs

Mais moins compatible : IE6 (encore majoritairement répandu) et inférieurs ne le gèrent pas
IE 5 et 5.5 sont morts et enterrés. Ça, c'est réglé.
Quant à IE6, il est autour de 20-30% (25% dernièrement me dit Market Share). Et ça descend (forcément). Donc «majoritaire», c'est un peu rapide.

Disons plutôt que les trois quarts utilisateurs pourront voir le PNG-24 transparent correctement. Suivant le design, pour IE6 on pourra:
- se contenter d'une couleur de fond opaque dans les paramètres de l'image (pas de transparence, mais évite le fond gris moche utilisé par défaut);
- créer des images en PNG-8 ou GIF et les appeler à la place des PNG-24 pour IE6 uniquement (correctifs CSS via un commentaire conditionnel visant IE6);
- utiliser des filtres AlphaImageLoader (demande aussi l'utilisation de correctifs CSS séparés pour IE6).

a écrit :
se contenter d'une couleur de fond opaque dans les paramètres de l'image (pas de transparence, mais évite le fond gris moche utilisé par défaut);

Oui voilà j'avais trouvé cette parade aussi, car décidément il n'y a qu'avec IE que l'on a des problèmes couleur de fond, centrage-décalage, espérons qu'avec la version 8 il y en aura moins lol pour ma part c'est FF et Safari
Modifié par Gil88 (29 Aug 2008 - 22:13)