.codigo{
background:#000;
color:#fff;
}
.div{
position:absolute;
width:150px;
height:150px;
left:150px;
background:#333;
}
.div2{
width:200px;
height:200px;
opacity:0.5;
color:#f90;
background:-moz-linear-gradient(#FFF 0%, #DEDEDE 100%);
border:solid 5px #DEDEDE;
}

Transparencias con css3

Hola como están, en esta nueva entrada les voy a enseñar cómo hacer transparencias con CSS3 de una forma fácil y rápida, es cierto que aunque css3 no está soportado por todos los navegadores su uso está siendo cada vez más usado en el mundo de la creación de sitios web.

Este tipo de transparencias con css3 ya lo vimos en una entrada anterior pero no tube tiempo de explicarlo y tras la consulta de un amigo entonces decidí hacer una entrada sobre este tema. Aquí nos vamos a centrar en la propiedad opacity de CSS que cada vez está siendo más utilizada por miles de programadores web para darle un estilo mucho más elegantes a sus sitios web.

Para crear transparencias con css3 que necesito?

Para crear transparencias con css3 lo que tenemos que saber es que la propiedad opacity proporciona un numero dependiendo de la transparencias que queramos darle a nuestro div en este caso van de 0 hasta 0.9 mientras menos sea el numero más transparente será nuestro div.
Veamos el ejemplo primero creamos 2 Div.

<div class=”div”> </div>
    <div class=”div2″>Div Transparente</div>  

Al primer div le aplicamos un color fuerte y el segundo vamos a colocarlo por encima del primero para aplicarle la transparencias y poder ver el efecto.

Nuestro código css3 para estos div seria el siguiente

<style>
    .div{
    position:absolute;
    width:150px;
    height:150px;  
    left:150px;
    background:#333;
    } 
    .div2 {  
    width:200px;
    height:200px;
    opacity:0.5;  
    color:#f90;
    background:-moz-linear-gradient(#FFF 0%, #DEDEDE 100%);
    border:solid 5px #DEDEDE;
    }
</style>

Si te fijas lo que hemos creado es muy sencillo, solo lo que tenemos que ver es la propiedad opacity y el gradient
El gradient se lo hemos aplicado para darle un color más claro al div y que valla variando de blanco a gris, luego con la propiedad opacity le aplicamos a ese gradient una opacidad de un 50% lo que hace que nuestro div se vea transparente.

Y el resultado de nuestro tutorial de transparencias con css3 seria el siguiente

Div Transparente

Gracias y hasta la proxima entrada..