Hoy amos a hecharle un ojo a esto de la “opacidad”.
La opacidad es ese bonito efecto que vemos cuando algun elemento dentro de nuestro documento HTML esta un poco “transparente” o translucido, es decir que podemos ver atravez de el.
Comentario personal:
Internet Explorer nos viene a cagar el juego (como siempre) y nos hace la utilización de la opacidad mas dificil!!
Ajustando la opacidad con CSS
El nivel de opacidad para un objeto es definido con la propiedad CSS “opacity” o “filter: alpha(opacity)” (este ultimo para la mierda de IE).
Ejemplo para Internet Explorer (asco total):
<div id="miSuperCapa" style="filter: Alpha(opacity=50)">Hello World</div>
En este caso, el nivel de opacidad se define con un número entero que va desde 0 (totalmente transparente) hasta el 100 (totalmente visible), es decir que si queremos el 50% de opacidad usaremos el valor 50
Ejemplo para el resto de navegadores:
<div id="miSuperCapa" style="opacity:0.5">Hello World</div>
En este caso (y mas bonito) la opacidad se define con un numero decimal que va desde 0 (totalmente transparente) hasta 1 (totalmente opaco), es decir que si queremos el 50% de opacidad, usaremos el valor 0.5 (ahora ven que IE nomas viene a cagarla?)
NOTA IMPORTANTE:
Segun mi desafortunada experiencia con Internet Explorer, debemos definir la opacidad directamente en el tag donde la utilizamos, es decir.. no nos vale definirla en una clase CSS, ademas de que si queremos modificar la opacidad atravez de JavaScript (DHTML) no funciona si no le definimos tambien las propiedades css width y height, esto de nuevo nos viene a re-cagar el juego con IE, ya que con los otros navegadores no es necesaria toda esta mierda.
En otra entrega les contare como podemos modificar la opacidad con JavaScript, teniendo la posibilidad de programar efectos parecidos a los que se utilizan en Flash.
