CSS: Columnas Transparentes

columnas transparentes con CSS

A los objetos en las pagina web se les puede aplicar un efecto que bien utilizado puede ser una gran herramienta me refiero a las transparencias, pero como siempre para casi todo ay trabas y en el diseño y desarrollo web la mayoria del tiempo es el IE6, la manera sencilla de aplicar transparencias es usando imagenes PNG con transparencia y utilizando alguna de las mil soluciones para que esta transparencia funcione en cualquier navegador.

Pero ay otra solucion “dios bendiga al CSS” jeje, que es usando CSS y aplicar la transparencia y si habria que escribir 2 lineas de mas para que afecte en cualquier navegador pero tambien existe un problema la transparencia automaticamente se aplica tambien al contenido que se encuntre dentro del bloque al que le pusimos la transparencia, pero como para todo ay su solucion, y como dice el articulo que les linkeare.

un bug arregla a otro bug

Como se hace usando un contenedor (div) con posicion relativa (position:relative;) y dentro de este dos capas mas (div’s) cada una con diferentes caracteristicas, una que seria el fondo y este tendria aplicado la transparencia y una segunda que estaria encima de las dos anteriores que seria el contenido, si no me explique cosa que se que fue asi, aqui les dejo el codigo:
HTML:
[code lang=”html”]

Content

[/code]

CSS:
[code lang=”css”]
#column-1 {
position: relative;
float: left;
width: 500px; /* remember to set a width */
}

.overlay{
position: absolute;
top: 0; /* These positions makes sure that the overlay */
bottom: 0; /* will cover the entire parent */
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65; /* older Gecko-based browsers */
filter:alpha(opacity=65); /* For IE6&7 */
}

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

.content {
position: relative;
}
[/code]

Ahora un tip mas un hack para que el overlay ocupe el 100% de la columna (contenedor).

[code lang=”css”]
/* Lets use the * html hack so only IE6 reads the rule */
* html #column-1 .overlay {
height: expression(document.getElementById(“column-1”).offsetHeight);
}
[/code]

Ver Ejemplo

Esta forma de realizar las columnas transparentes la saque de un post en ingles que en parte e traducido en este post, si desean ver el post original sigan el enlace, de cualquier forma si tienes alguna duda igual y te pueda ayudar seguramente.

Enlace: Cross-Browser Transparent Columns

comment ¿Que opinas?

Artículos recientes

close

Ilustraciones para reflexionar sobre los problemas de la sociedad

Quiero compartir con ustedes unas impactantes ilustraciones realizadas por un artista conocido en Facebook como “Al Margen“; la cuales, nos invitan a reflexionar sobre lo intrincado y vacío de los problemas actuales de la sociedad….

close

El Spinner de Google, la solución a tu estrés y sin gastar tu dinero

Con motivo de la creciente afición y moda de los Spinners para aliviar el estrés muchas empresas han sacado sus versiones de esta simple herramienta; razón por la cual, Google ha decidido no quedarse atrás…

close

play_circle_outline WoodSwimmer, fascinante stop motion hecho con cortes de madera

Brett Foxwell es un fotógrafo creativo que gusta de tomar fotografías en alta definición sobre objetos inanimados “en movimiento”; en esta ocasión presenta su nueva película en Stop Motion denominada WoodSwimmer, la cual, nos sumerge…

close

Conoce el nuevo logo de Opel un diseño acorde a las tendencias 2017

Opel una de las empresas del sector automotriz alemán con mayor presencia en el mundo ha renovado su marca para a “adecuarse al mundo digital”. Este cambio obedece a una nueva dirección de la directiva…

close

Colorstrology, que dice el color de tu nacimiento sobre ti

Colorstrolgy, es una combinación de la astrologia, numerologia y de la teoría del color; esta mezcla conforma un análisis que busca describir la personalidad de las personas mediante el color Pantone asignado a su fecha…

close

Creativa serie fotográfica que recrea escenas de Disney

Savannah Kate Bridge es una profesional de la fotografía que ha utilizado parte de su tiempo libre para una de sus principales aficiones. Esta afición consiste en recrear algunas escenas de películas de Disney mediante…

notifications Recién publicamos
close