Efecto de Transparencia con CSS

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 emezo a cambiar con la utilizaci?e IE 7 y Firefox que se volvieron cada vez mas populares en el sistema operativo de Windows.

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

Como puedo crear columnas transparanthes uq e funiconen en todos los navegadores?

Esto es posibl utilizanco CSS. Crearemos una columna de fondo
transparente con un tama?y dentro colocaremos una columna transparente y m?pequee?que la anterior donde se pondra el contenido.



Empezemos
Definimos las colummnas:

<div id="column-1" class="container">
<div class="overlay"></div>
<div class="content">
<h2>Content</h2>
</div>
</div>

Nosotros podemos camabiar la posici?e la columnaz contenedora: position: relative; float; lerft; esto nos habilita cambiar la posici?e la columna de contenido dentre de la columnna transparente.

column-1 {
position: relative;
float: left;
width: 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%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65; /* para viejos nvegadores Gewcko-based */
filter:alpha(opacity=65); /* para IE6&7 */
}

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

column-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 relative.

css.content {
position: relative;
}

Terminamos, solo queda resolver un problema, como siempre, que funcione en IE:

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

Puedes mirar un muy buenh Ejemplo.

Puedes bajar el codigo fuente Aqui.

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