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

Diseñador crea Dadbag para quienes quieren tener pancita

Si alguna vez has deseado tener una pancita de papá suburbano quizá este producto realizado por el diseñador Albert Pukies; el cual no es más que una riñonera o bolsa de vientre que simula ser una prominente…

close

Loving Vincent: la primera película pintada a mano

Loving Vincent, es una película única en su tipo; ya que para su proceso de producción requirió más de 66,000 óleos para pintar fotograma por fotograma su historia. Esta película cuenta la historia del pintor…

close

Estrenos Netflix octubre 2017

Llega el mes de octubre y con ello nuevos estrenos en series películas como Stranger Things y Donnie Darko; las cuales se incorporará al catálogo vigente de Netflix para este décimo mes del año 2017….

close

Tipografía en alimentos por Enon Avital

El día de hoy queremos compartir con ustedes unas geniales muestras tipográficas realizadas por el diseñador Enon Avital. Esta colección ha sido realizada inspirándose en letras hebreas; esto debido a que Avital piensa que ya…

close

Desafíos para eliminar bloqueos creativos

Los temidos bloqueos creativos; son aquellos males que acosan a los diseñadores, artistas y creativos al momento de desarrollar nuevas ideas. Es por eso, que el día de hoy compartiremos una forma de eliminar aquellos…

close

Ligoteo Gamer, el Tinder para Gamers

Vagando por Internet y la Google Play nos hemos topado con una aplicación un tanto llamativa; la cual es denominada como “Ligoteo Gamer” y es desarrollada por Ligoteo Social Network. Esta aplicación es un tanto peculiar…

notifications Recién publicamos
close