Div transparentes

#principal{
background:#f90;
text-align:center;
border-radius:5px;
padding:40px;
width:200px;
}
#contenido{
width:150px;
text-align:center;
padding:60px;
border-radius:5px;
border:solid 1px #DEDEDE;
background:rgba(204,204,204,0.3);
}
#codigo{
background:#999;
color:#FFF;
padding:10px;
border-radius:5px;
border:solid 1px #DEDEDE;
}

Div transparentes

Hola amigos como están, vamos a ver en esta ocasión cóomo crear div transparentes con css3, hoy en día ya es una realidad la transparencias en nuestros sitios web para hacerlo más dinámicos y más profesional.

Con los div transparentes podemos darle a nuestro sitio web un aspecto muy elegante al igual que lo hace twitter, y facebook, pero para ver un ejemplo entra al tutorial anterior de Menú con html5 y css3 donde creamos un menú con bordes transparentes.

Bueno si alguna vez te preguntaste como hacer esa transparencias que tiene twitter y facebook entonces llegaste al lugar correcto porque aquí te vamos a enseñar cómo hacer esos div transparentes.

Div transparentes cosas que tienes que saber

Lo primero que tenemos que saber es que para crear div transparentes lo podemos hacer de dos maneras.

Primera y para mí la mas optima, es utilizando colores RGBA()

Segunda utilizando la propiedad opacity que incorpora CSS3

Pero que quede claro con las dos formas podemos obtener los mismos resultados bueno empecemos con el mini tutorial lo primero que vamos a crear un documento HTML o si ya lo tienes entonces solo sáltate a la parte del código css3.

En este caso al documento lo he llamado div-transparentes.html pero por supuesto que le puedes poner el nombre que quieras, bueno el código de nuestro documento HTML es el siguiente.

<!DOCTYPE html>
<head>
<meta charset=”utf-8″ />
<title>div transparentes</title>
</head>
<body>
<div id=”principal”>
<div id=”contenido”>
<b>div transparentes</b>
</div>
</div>
</body>
</html>

Ahora le aplicamos las transparencias con css3 utilizando RGBA.

#principal{
 background:#f90;
 text-align:center;
 border-radius:5px;
 padding:40px;
 width:200px;
 }
#contenido{
 width:150px;
 text-align:center;
 padding:60px;
 border-radius:5px;
 border:solid 1px #DEDEDE;
 background:rgba(204,204,204,0.3);
 }
</style>

Con esta opción obtenemos las transparencias siguientes para nuestros div.

Mi primer div transparente con css3

div transparentes

Y para el caso dos con la propiedad opacity de css3 o con el código siguiente.

#principal{
 background:#f90;
 text-align:center;
 border-radius:5px;
 padding:40px;
 width:200px;
 }
#contenido{
 width:150px;
 text-align:center;
 padding:60px;
 border-radius:5px;
 border:solid 1px #DEDEDE;
 background:#999;
 opacity:0.3;
 }

Si te fijas en este caso solo hemos cambiado el RGBA por la propiedad opacity y le hemos puesto un background:, Y con esto obtenemos el mismo resultado.

div transparentes

Como utilizar la propiedad opacity para hacer transparencias.?

Sencillo si te fijas en ambos casos la hemos utilizados solo que en el primer en el RGBA el cuarto valor le hemos pasado la propiedad opacity con un valor de transparencias de 0.3
La propiedad opacity va desde 1 hasta 9 mientras menor sea el número más transparentes se hacen nuestro DIV

Bueno espero y con esto aprendan a crear div transparentes con css3 y a darle un dinamismo a sus sitios web…
Gracias y hasta la próxima entrada…

Comments

  1. By Jozze

Deja un comentario

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