Alpha Opacity : transparencia con CSS

Veamos un pequeño ejemplo del atributo Alpha u Opacity de CSS que nos permite hacer que cualquier objeto de nuestra web, tenga un nivel de transparencia (del 1 al 100%) que nosotros queramos.

Aunque no es muy recomendado, hay aún desarrolladores que utilizan transparencias. Y no me refiero a programar con ropa interior provocativa. Me refiero a que un elemento, por ejemplo un <div> o una <img> de nuestra web tenga un % de transparencia.

Para que una capa o elemento de nuestra web tenga transparencia, deberemos formar su descripción en la hoja de estilos asignándole unos atributos específicos. Pongamos un ejemplo:

Tenemos una capa y queremos que tenga un color rojo, pero que transparente lo que tiene debajo.

// Declaramos la capa en nuestra página

<div class="alpha50">Contenido</div>

Y ahora declaramos en nuestra hoja de estilos el elemento, y le aplicamos la transparencia con los atributos Filter, opacity y -moz-opacity. No es que necesitemos los 3 para aplicar la transparencia. Cada uno de ellos, es para que se aplique en los diferentes navegadores (Chrome, Firefox, IExplorer..)

// En nuestra hoja de estilo css tendremos
.alpha50 {
  filter: alpha(opacity=50);   // Para IExplorer
  opacity: .5;   // Para Firefox
  -moz-opacity:0.5;    // Para Mozilla
} 

Los tres valores hacen el mismo efecto, pero para diferentes navegadores.

Con esta simple definición, puedes jugar desde 0.1 a 1.0 el nivel de transparencia. Es sencillo con los atributos Alpha y Opacity de CSS conseguir transparencia en nuestra web.


Más información

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*