Explicamos como hacer efectos de transparencia, cambiando la opacidad de elementos como capas, formularios e imágenes entre otros.

En esta ocasión mostraré un efecto bastante simpático que podemos aplicar en capas, imágenes, formularios, etc…

La propiedad opacity funciona tanto en Internet Explorer como en Firefox:

IE:

filter: alpha(opacity=50)

Firefox:

opacity: .5

Mozilla:

-moz-opacity:0.5

El siguiente ejemplo funciona en los dos navegadores:

<style type=”text/css”>
.ejemplo {width: 100%; background-color: red}
.opaco {filter: alpha(opacity=50); opacity: .5}
</style>

<p class="ejemplo">Ejemplo sin opacity.</p>
<p class="ejemplo opaco">Ejemplo con opacity a 50%.</p>
<p><img src="imagen.gif" width="100" height="109"><img src="imagen.gif" class="opaco" width="100" height="109"></p>

Ver ejemplo

Federico Javier Elgarte
http://www.cssboulevar.com.ar/