Como hacer transparencias con Opacity en CSS3

Transparencia en CSS3

CSS3 promete solucionar muchos de los problemas y necesidades de los maquetadores web. Todavía hay incompatibilidades con CSS2.1 en algunos navegadores, pero esto no desmerece estudiar y practicar sobre esta nueva promesa.

La propiedad Opacity permite hacer transparencias con valores Alpha que van del 0.0 al 1.0, esto equivale a 0% y 100%. Muy facil de usar solo hay que poner la propiedad y su valor, esta propiedad funciona correctamente en Firefox 3+ y no da señales de vida en IE.

Para este ejemplo use dos divs, el primero sin transparencia y el segundo con una transparencia del 50%.

Código CSS:

.div{
position:absolute;/*Para que no choquen los divs*/
width:200px;
height:200px;
top:60px;
left:150px;
background-color:#FFCC00;
} 
.div2 {  
width:200px;
height:200px;
opacity:0.5; /*Opacidad de 50%*/ 
background-color:#990000;
}

Código XTML:

Div sin Transparencia
Div Transparente

Resultado

Transparencia con css3

Descargar el Ejemplo

4 respuestas a “Como hacer transparencias con Opacity en CSS3”

  1. Jack Bach dice:

    Interesante tema el de las transparencias con CSS. Aunque no se me ocurren muchas utilidades ahora mismo, seguro que tiene una infinidad.

    Bunos estos tips de CSS.

    Hasta pronto!

  2. Willowman dice:

    Si, CSS3 se viene con todo porque promete ser muy versatil reduciendo el uso de imágenes a la hora de diseñar. Saludos!!!

  3. JuanM. dice:

    para IE se puede usar la propiedad ‘filter’ y como valor ‘alpha(opacity=[0-100])’
    quedaria asi:

    .div2 {
    width:200px;
    height:200px;
    opacity:0.5; /*Opacidad de 50%*/
    filter:alpha(opacity=50); /*Opacidad de 50% para IE 6,7 y 8*/
    background-color:#990000;
    }

  4. jhon dice:

    gracias, lo necesitaba… También se podría usar una imagen y reducir su opacidad en photoshop y repetirla, bueno creo que aseguraría compatibilidad con ie.

Deja un comentario