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
