effet 3d en CSS

Version imprimable

effet 3d en CSS

salut,

je me demandais s'il existait une methode facile a mettre en ouvre pour donner un effet de 3D sur mes boutons, lorsqu'un utilisateur clic dessus.

Pour l'instants, mes boutons se resument en une simple image :
Code:

1 2 <html:button property="avance" value=" " styleClass="rechercheavance" onclick="document.location.href='./AdvanceSearch.jsp'"/>
et dans ma css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 input.rechercheavance{ display: block; width: 150px; height: 35px; background-image: url(../images/buttons/rechercheavance.png); background-repeat: no-repeat; border: 0; text-align: center; FONT-SIZE: 10px text-decoration: none; cursor:hand; }
est-ce que je dois forcement créer une nouvelle image avec des ombres et tout?

merci de vos idées

27/07/2006, 14h26
titoumimi
CSS à appliquer à tes images :
Code:

1 2 3 4 5 6 7 8 .boutonup { border:outset 2px; background-color: #3674AB; } .boutondown { border :inset 2px; background-color: #3674AB; }
et ça se gère comme ça :

Code:

<input type="image" src="toto.gif" alt="coucou" name="azerty" class="boutonup" onmousedown="this.className='boutondown';" onmouseup="this.className='boutonup';" onmouseout="this.className='boutonup';">

(Merci SF au passage de m'avoir filé cette astuce y'a quelques temps ;) )
27/07/2006, 15h06
delas

wé sympa cette solution!

facile a mettre en oeuvre, sauf qu'il faut que je remplace tous mes boutons pas des images dans mes 364 313 584 JSP.....

ctrl+R power

merci
27/07/2006, 15h15
delas

et petite question qui m'arrangerais :

on peut pas mettre quelque chose du genre

Code:

onmousedown="this.className='boutondown';"

au lieu de

Code:

onmousedown="this.className='boutondown';"

?
27/07/2006, 15h18
delas

Code:

onmousedown="this.style.border='inset 2px;';"

ca marche!

encore merci

pour ceux qui veulent garder les boutons, pas mettre d'image, qui sont sous ie6 voila une solution qui marche :

Code:

1
2
<html:button property="avance" value="&nbsp;" 
styleClass="rechercheavance" onclick="document.location.href='./AdvanceSearch.jsp'" />

dans le css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
input.rechercheavance{
	display: block;
	width: 150px;
	height: 35px;
	background-image: url(../images/buttons/rechercheavance.png);
	background-repeat: no-repeat;
	border: 0;
	text-align: center;
	FONT-SIZE: 10px
	text-decoration: none;
	cursor:hand;
	behavior:url(/ecrm/theme/buttonEffect.htc);
}

et dans mon fichier buttonEffect.htc :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<public:component>
<script>
element.onmouseout=oute;
element.onmousedown=downe;
element.onmouseup=upe;
 
function oute(e){
this.style.border='inset 0px;';
}
 
function downe(e){
this.style.border='inset 2px;';
}
 
function upe(e){
this.style.border='inset 0px;';
}
 
</script>
</public:component>