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

México intenta regular la industria del videojuego con su propia clasificación

La industria de los videojuegos ha tenido un crecimiento exponencial en todo el mundo; especialmente en territorio mexicano, donde la industria ha pasado de 11 mil 278 millones de pesos a 22 mil 852 millones tan…

close

play_circle_outline Campaña reconoce la capacidad creativa con humor

Few Can Do What You Do, es el nuevo lema de la campaña de Format una plataforma portafolio para creativos; esta campaña bajo el lema “Pocos pueden hacer lo que tu” reconoce la capacidad de…

close

play_circle_outline Como crear efecto de doble exposición en photoshop en menos de 1 minuto

El photoshop es de las herramientas imprescindibles en el catalogo de programas de un diseñador o creativo; no obstante, muchos no tenemos la pericia y conocimiento de todo lo que podemos lograr con el. Es…

close

Lista de estrenos en Netflix para Mayo 2017

Netflix continua incrementado su catalogo de películas y series cada mes; siendo el turno del mes de Mayo del 2017 donde llegarán nuevas temporadas de series como House of Cards y Unbreakable Kimmy Schmidt; así como…

close

play_circle_outline Mira el nuevo y emocionante trailer final de Cars 3

El día de ayer se dio a conocer el trailer final de la nueva entrega de la película de Disney y Pixar Cars 3; esta nueva entrega de la saga nos relata la ultima carrera…

close

Ilustraciones tipográficas inspiradas en el reino animal

El diseñador británico conocido como Marcus Reed ha creado una genial colección de ilustraciones tipográficas inspiradas en el reino animal; estas ilustraciones nos muestran a diversos animales desde el Cocodrilo hasta la Cebra con sus…

notifications Recién publicamos
close