28173 sujets

CSS et mise en forme, CSS3

Bonjour!

Malgré que cette question soit en relation avec l'utilisation de CSS, je ne sais pas si elle est dans la bonne section alors admin, n'hésitez pas à la replacer le cas échéant.

Bon mon "problème" est simple. J'ai une page avec 2 boutons (francais anglais). La page a un background en image. Et les 2 boutons sont des images. Je les ai placé par dessus le background. Tout fonctionne parfaitement.

Mon problème vient du fait que mes boutons on une "section" de leur apparence qui est semi transparente. Pour vous donner une idée, dans photoshop le bouton a une ombre créé dans les blending option. Donc, lorsque que je sauvegarde en png (pour conserver la transparence) et que je place le bouton par dessus un background, voici la différence que ca donne entre l'image photoshop et le résultat web.

upload/2595-exemple.jpg

Vous voyez, le contour blanc? Je me demandais si c'était un astuce CSS ou photoshop pour a donner le même résultat que dans photoshop? Je ne dois pas être le seul qui veut réussir une ombre. Important, l'ombre n'est pas "a part" de mon bouton. Elle fait partie de mon bouton avec le blending.

J'attend de vos nouvelles!

Merci!
Modifié par Jaff (30 Jul 2007 - 18:46)
salut

Bon, je sais pas trop d'où vient le problème de l'ombre.

Mais... tu utilises quoi comme navigateur ? ie 6 ?
Parce qu'internet explorer 6 ne supporte pas la transparence dans les png. il mets un vieux fond gris. Pour ie7, je crois que le problème a été corrigé, mais je suis pas sûre, j'ai jamais testé.
Normallement, sur FF, tout va bien.

Pour éviter ce genre de problème, il vaut mieux ne pas utiliser de png pour la transparence.
2 solutions (mais il faut faire des sacrifices) :
- tu utilises des gif, mais tu perd beaucoup en qualité.
- tu utilises des jpeg, avec un peu du contour pour conserver l'ombre. le problème, c'est qu'il ne faut pas avoir de graphisme fluide, qui bouge en agrandissant le texte ou la fenêtre...

Voilà
Bonne continuation
Ca me fait penser qu'il y a une astuce JS pour que IE gères la transpa des images... (png ?)

Si quelqu'un voit de quoi je parles, qu'il postes cette astuce.
a écrit :
Ca me fait penser qu'il y a une astuce JS pour que IE gères la transpa des images... (png ?)


J'ai trouvé cette astuce en écrivant "Transparence" dans le moteur de recherche de ce forum, il est dans un des post résolu. Cependant, cela ne m'aide en rien car je suis en internet Explorer 7 et le problème a été résolu. Néanmoins, je ne veux pas oubligé mes cliens à utiliser internet explorer alors je crois que je vais essayer une autre solution en laissant faire la transparence.

Si quelqu'un d'autre a quelque chose a proposer, n'hésitez pas!

Merci

J-F