28173 sujets

CSS et mise en forme, CSS3

Transparence d'image

Bonjour à tous,

Je suis entrain de bosser sur des boutons au concept similaire à ceux du nouveau Yahoo! Mail. Voici deux petites images pour illustrer leur comportement.

upload/7540-bouton1.jpg upload/7540-bouton2.jpg

Voilà ce que ça donne, l'effet est pas mal. Au niveau du cadre bleu et du fond en dégradé lors du passage de la souris, j'pense pas que ce soit trop difficile, c'est un changement d'image. Là où ça m'a surpris par contre, c'est au niveau de la gestion de l'icone à gauche de Répondre par exemple. L'icone est un gif, avec un fond blanc et c'est là que je bloque.

Comment peut-on rendre un gif transparent, avec une telle netteté (pas de bord granuleux blanc) ? J'ai bien pensé à modifier l'opacité, mais ce n'est pas la bonne technique apparemment. Par contre, est-il possible d'agir sur une seule couleur ?

Ou peut être faut-il se tourner vers le javascript ?

Vos idées et remarques sont les bienvenues Smiley smile
Pour ce qui est des formats web, la transparence graduelle avec couche alpha n'est possible qu'en PNG-24. Ça marche avec tous les principaux navigateurs du marché, sauf un. Je te laisse deviner lequel. Smiley cligne
Oui comme il a été dit plus haut, seul le PNG-24 gère ce genre de transparence. Sauf que IE bien sr ne les prend pas en compte ... tu peux utiliser un .htc pour régler le probleme, PNG behavior marche très bien chez moi. Donc essaye ^^
Merci pour vos réponses =)
Malgré tout, je me demande comment on fait yahoo. Je me pencherai sur PNG Behavior, ça à l'air interessant.

Sinon, j'ai une autre petite question concernant toujours les boutons graphiques. Je vous joins mon script d'essai pour vous illustrer le problème.

<html>
<head>
<title>Test</title>
<style>
.test {
background: url('images/fond.jpg');
padding: 10px;
}

.test2 {
background: #ff0000;
padding: 10px;
}
</style>
<script>
function change() {
	var bouton = document.getElementById("bouton");
	bouton.getElementsByTagName("td")[0].setAttribute("className", "test");
	bouton.getElementsByTagName("td")[1].setAttribute("className", "test");
	bouton.getElementsByTagName("td")[2].setAttribute("className", "test");
}

function rechange() {
	var bouton = document.getElementById("bouton");
	bouton.getElementsByTagName("td")[0].setAttribute("className", "test2");
	bouton.getElementsByTagName("td")[1].setAttribute("className", "test2");
	bouton.getElementsByTagName("td")[2].setAttribute("className", "test2");
}
</script>
</head>

<body>
<table id="bouton" onmouseover="change()" onmouseout="rechange()" cellpadding="0" cellspacing="5" border="0">
<tr>
<td>L</td>
<td>Test</td>
<td>R</td>
</tr>
</table>
</body>
</html>


J'ai fais ce petit code pour essayer de travailler sur le problème que je rencontre avec IE (oui encore une fois, le mauvais élève). Sur Firefox, pas de problème comme d'hab. En fait je modélise un bouton par un tableau de trois cellules, la premiere correspondant au bord gauche, la deuxieme au centre avec le texte du bouton, la troisième au bord droit. Lorsque je demande l'affichage d'un background coloré, pas de problème. Là où ça foire, c'est lorsque je veux placer un arrière plan (une image) lors du onmouseover. Quand on déplace la souris sur le bouton, il y a un effet de clignotement sur le bouton assez désagréable... Essayez en mettant une image quelconque en fond de mon script et regardez sous IE, c'est assez moche Smiley langue

Certains auraient-ils une idée du problème ? Merci
Sujet clos
Aller à