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 operativo 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
transparente con un tamaño, y dentro colocaremos una columna transparente y más pequeña aque la anterior donde se pondra el contenido.
Empezemos
Definimos las columnas:
<div id="column-1" class="container">
<div class="overlay"></div>
<div class="content">
<h2>Content</h2>
</div>
</div>
Nosotros podemos camabiar la posición de la columna contenedora: position: relative; float; left; esto nos permite cambiar la posición de la columna de contenido dentre de la columna transparente.
column-1 {
position: relative;
float: left;
width: 500px; /* Se puede cambiar el ancho */
}
Ahora crearemos la columna transparente...
css.overlay{
position: absolute;
top: 0; /* permite subir y bajar la columna */
bottom: 0;
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65; /* para viejos navegadores Gecko-based */
filter:alpha(opacity=65); /* para IE6&7 */
}
Ok. Ahora veamos el codigo para la columna de contenido:
column-1 .content {
width: 460px;
padding: 20px;
}
Ya casi terminamos. Como veras hasta ahora, 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 buen Ejemplo.
Puedes descargar el codigo fuente Aqui.
Fuente Original bitsamppixels.com.
Entradas
