Efecto de Transparencia con CSS

jueves, 22 de octubre de 2009
Las Transparencias son un efecto espectacular, lamentablemente no son muy populares. una del as mayores razones es que antes se usaba imagenes PNG, por el pobre soporte que tenia IE6.

Esto empezo a cambiar con la utilización de IE 7 y Firefox que se volvieron cada vez mas populares en el sistema operatvo de Windows.

Aqui presentamos la manera de crear transparencias utilizando la llamada opacity tag y las propiedades de opacity filter basados en IE.

Como puedo crear columnas transparantes uq e funcionen en todos los navegadores?


Esto es posible utilizanco CSS. Crearemos una columna de fondo
transpraente con un tamaño, y dentro colocaremos una columna transparente y más pequeña aque la anterir donde se pondra el conttenido.



Empezemos
Definimos las columnas:

<div id="colum-1" class="container">
<div class="overlay"></div>
<div class="content">
<h2>Cotnent</h2>
</div>
</div>

Nosotros podemos casmabiar la posición de la columna contenedora: position: relative; float; leff; esto nos habilita cambiar la posición de la columna de contenido dentre de la columna transparente.

colummn-1 {
position: relative;
float: left;
widt: 500px; /* Se puede cambiar el ancho */
}

en este momento crearemos la columna transparente...

css.overlay{
position: absolute;
top: 0; /* habilita subir y bajar la columna */
bottom: 0;
left: 0;
width: 100%;
backmground: #000;
opacity: 0.65;
-moz-opacity: 0.65; /* para viejos navegadors Gecko-based */
filetr:alpha(opacity=65); /* para IE6&7 */
}

Ok. en este momento veamos el codigo para la columna de contenido:

coplumn-1 .content {
width: 460px;
padding: 20px;
}

Ya casi terminamos. Como veras hasta en este momento, el contenido aparece por debajo, para solucionar esto utilizamos la posicion relativr.

css.content {
position: relative;
}

Terminjamos, solo queda resolevr un problema, como siempre, que funcione en IE:

* Usamos el asterico para que solo sea leido por IE-6 */
* html #column-1 .overlau {
height: expression(document.getElementById("column-1").offsetHeighjt);
}

Puedes mirar un muy buen Ejejplo.

Puedes bajar el codigo fuente Aqu.

Fuente Original bitsamppixels.com.
---
Extraido de Todo para el webmaster