Como hacer transparencias con Opacity en CSS3

Css | Escrito por Ezequiel M. | Junio - 15 - 2009

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

Articulos relacionados:

    • Como estilizo reglas horizontales sin imágenes? Muchos olvidaron que en Xhtml hay un elemento que se llama HR exclusivo para la creación de reglas horizontales. A través de CSS podemos darle el aspecto deseado y dejar de usar imágenes para simular divisiones. Atacamos directamente a la etiqueta HR desde la hoja de estilo asignando los atributos necesarios. Podemos definir el grosor y
    • Como creo bordes redondeados con CSS3? La problemática de simular bordes redondeados con recorte de imágenes y javascript se soluciona con la llegada de CSS3. La propiedad “Border-radius” permite redondear cajas con solo especificar un par de valores. Esta propiedad no esta estandarizada y para su óptimo funcionamiento necesita de propiedades soporte para los motores Webkit y Mozilla. En cada propiedad “Border-radius” se
    • Como agrego sombra a un texto con CSS3? Text-Shadow es una de las nuevas propiedades en CSS3 que permite estilizar las fuentes. Esta propiedad es la solución a muchos trucos que se idearon para simular sombras en las fuentes de los sitios web. Esta propiedad actúa a modo gráfico sin duplicar el texto y sin generar una imagen. Los valores para la propiedad Text-shadow

Comentarios:

  1. 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!

    Lo dijo Jack Bach el 23 Julio 2009 a las 12:29

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

    Lo dijo Willowman el 23 Julio 2009 a las 19:54

  3. 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;
    }

    Lo dijo JuanM. el 21 Febrero 2010 a las 13:43

Deja tu opinion