Transparencia con CSS

CSS además de permitir el manejo del formato de los textos en HTML brinda métodos para enriquecer la disposición visual del contenido, entre ellas la aplicación de transparencias. Aunque el manejo de las transparencias aun no es igual en todos los navegadores por lo cual incluiremos los métodos para obtener la máxima compatibilidad.

Como utilizar los estilos
Si queremos compatibilidad con todos los navegadores, incluso con las versiones antiguas de Mozilla (Netscape Navigator) o versiones anteriores de Safari la forma sería:

[css]
.alpha {
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}
[/css]
Donde se tiene que opacity es el más importantes pues es compatible con el actual estándar de CSS, filter es utilizado para Internet Explorer, -moz-opacity para versiones antiguas de Mozilla y -khtml-opacity para versiones anteriores a Safari 1.x.

Ahora este código lo podemos resumir obviando las versiones antiguas de Mozilla y Safari, con lo cual tendríamos.

[css]
.alpha {
opacity: 0.5;
filter:alpha(opacity=50);
}
[/css]

Ejemplo: imágenes Transparentes
Lo primero que hacemos es crear dos estilos uno para aplicar 75% y 25% de transparencia.

[css]
.alpha75 {
opacity: 0.75;
filter:alpha(opacity=75);
}
.alpha25 {
opacity: 0.25;
filter:alpha(opacity=25);
}
[/css]

Ahora incluimos las imágenes y le aplicamos los estilos recién creados.

  1. <div>
  2.     <img src="iphone.jpg" width="48" height="108" />
  3. </div>
  4. <div class="alpha75">
  5.     <img src="iphone.jpg" width="48" height="108" />
  6. </div>
  7. <div class="alpha25">
  8.     <img src="iphone.jpg" width="48" height="108" />
  9. </div>

Con lo cual obtenemos el resultado mostrado en img-alpha.html

Ejemplo: Fondo transparente
El siguiente ejemplo consiste en colocar una imágen como fondo y sobre el crear un bloque de texto que tenga transparencia.

[php]
.bg {
width: 420px;
height: 284px;
background: url(imgbg.jpg);
}
.trans {
background-color: #FFFFFF;
opacity: 0.5;
filter:alpha(opacity=50);
margin: 16px;
width: 250px;
border: solid 2px #FFFFFF;
}
.trans p {
margin: 5px;
color: #000000;
}
[/php]

Luego creamos los elementos html y aplicamos los estilos recién creados, nótese que el estilo que tiene la transparencia es llamado .trans y los elementos dentro del mismo heredarán la transparencia.

  1. <div class="bg">
  2.     <div class="trans">
  3.         <p>Lorem ipsum dolor sit amet, consectetuer
  4.         adipiscing elit. Donec odio. Quisque volutpat
  5.         mattis eros. Nullam malesuada erat ut turpis.
  6.         Suspendisse urna nibh, viverra non, semper
  7.         suscipit, posuere a, pede.</p>
  8.     </div>
  9. </div>

Este ejemplo lo podemos ver funcionando en bg-alpha.html. Como pueden ver es sencillo de implementar y con un resultado muy vistoso.

Comentarios Total 5 comentarios


Carlos
Publicado: 08/12/2008 1:40 am

Me encanta tu blog, a ver cuando le das un repaso a Ajax que con lo que publicas + Ajax se podrían hacer unas webs im-presionantes

etzekiel
Publicado: 10/02/2009 11:52 am

Esta de lujo! pero a mi no me jalan en IE6; es raro tus ejemplos se miran bien, pero los mios no sirven… sigo intentando.

jomurob
Publicado: 24/03/2010 5:28 pm

hola, necesito saber como se hacen las transparencias pero con una modificacion… intente modificar tu codigo para poner la transparencia al centro de la pagina, pero aun no lo he logrado, espero que me puedas ayudar con esto, lo necesito para un proyecto que tengo en donde obligo al usuario a dar login al entrar a la pagina o en su caso registrarse… espero tu respuesta, gracias.

Transparencia con CSS | MusaConfusa
Publicado: 14/04/2010 10:46 am

[…] me blog.unijimpe.net traigo esta info interesante a la hora de […]

z666zz666z
Publicado: 27/03/2012 6:56 am

Tengo una duda esencial…

Está genial lo de opacity… pero es CSS3… en CSS2.1 cómo se puede lograr el mismo efecto.

Hace tiempo vi una página (con una URL larga de narices) que tenía transparencias y pasaba el validador CSS2.1, la lástima es que no anoté en su día cual era y ahora me surge la inquietud.

Gracias.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)