el tema es que quiero saber como se hace este efecto:
http://nettuts.s3.amazonaws.com/899_leaflet/Source/index.html
Concretamente el del boton verde que dice App Store, quiero saber como puedo hacer una sombra de forma progresiva, lo he intentado de esta forma:
Código HTML :
<style>
body{background:white; color:white;}
#contenedor{align:center; text-align:left; position:relative; width:32px; height:32px; border-collapse:colapse; }
#imagenFrente {position:absolute; width:32px; height:32px; cursor: pointer; _cursor: hand; margin: 0; filter:alpha(opacity=100); khtml-opacity:1; -moz-opacity:1; opacity:1;}
#imagenFondo {position:absolute; width:32px; height:32px; margin:0; }
#contenedor2{align:center; text-align:left; position:relative; width:32px; height:32px; border-collapse:colapse; }
#imagenFrente2 {position:absolute; width:32px; height:32px; cursor: pointer; _cursor: hand; margin: 0; filter:alpha(opacity=100); khtml-opacity:1; -moz-opacity:1; opacity:1;}
#imagenFondo2 {position:absolute; width:32px; height:32px; margin:0; }
</style>
<script>
var opacidad = 100;
var grado = 5;
var paso = 20;
function foco(){
grado = grado*-1;
cambio()
}
function cambio(){
opacidad += grado;
if((opacidad > 0) && (opacidad < 100)){
document.title = opacidad+" "+grado;
document.getElementById('imagenFrente').style.cursor = "pointer";
if(document.getElementById('imagenFrente').style.KhtmlOpacity) document.getElementById('imagenFrente').style.KhtmlOpacity = opacidad/100 ;
else if(document.getElementById('imagenFrente').style.MozOpacity) document.getElementById('imagenFrente').style.MozOpacity = opacidad/100;
else if(document.getElementById('imagenFrente').filters) document.getElementById('imagenFrente').filters.alpha.opacity = opacidad;
else document.getElementById('imagenFrente').style.opacity = opacidad/100;
cambio1();
}
else{
document.title = opacidad+" "+grado+" FIN";
document.getElementById('imagenFrente').style.cursor = "pointer";
}
}
function cambio1(){
setTimeout('cambio()',paso);
}
</script>
</head>
<body style="background-image: url('F0F0ADB8B86F_106.png')">
<center>
<div id="contenedor">
<IMG id="imagenFondo"
src="Right2.png" >
<IMG id="imagenFrente" onmouseover="foco()" onmouseout="foco()" onClick="window.location.href='http://www.google.es'";"
src="Right.png" >
</div>
</center>
</body>
</html>Pero al poner mas de un botón me crea problemas, aquí os dejo el ejemplo, nose si eso servira, o tendré que separar los scripts del HTML, no tengo ni idea, la verdad es que prefiero una forma más sencilla. Un saludo y gracias.
