martes, 5 de febrero de 2008

Transparentar capas en la web.

Hay ocasiones en las que quedaría bien en la web que zonas no activas aparecieran difuminadas dando a entender que no están en uso.
Para ello podemos hacer uso de la propiedad CSS3 llamada opacity soportada por Mozilla, IE no la soporta pero hay una solución para ello.
La propiedad opacity tiene valores entre 0 y 1. 0 es transparente y 1 totalmente opaco.
Para IE utilizaremos 'filter:alpha(opacity=100)' cuyos valores van de 0 a 100. 0 es transparente y 100 totalmente opaco. En el caso de IE hay que poner obligatoriamente la propiedad width ya que en caso contrario no funciona.
Para modificar dinámicamente estas propiedades tenemos para mozilla la instrucción this.style.opacity=0.2 y para IE this.filters.alpha.opacity=20 .
El ejemplo está probado en FireFox 2.0 y en IE7 .






Esto es un texto para ver la opacidad.









Ocultar


Ver

No hay comentarios: