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

Mockups PSD para productos de comida rápida

El día de hoy comparto con ustedes unos cuantos recursos ideales para realizar el branding de una empresa dedicada al ramo de la comida rápida. Estos Mockups en formato PSD son totalmente gratis; y podrás descargarlo…

close

Amordio, Una colección de gif’s animados inspirados en el amor y el odio

Quiero compartir con ustedes una peculiar colección de Gif’s animados inspirados en el amor y el odio; dos figuras que parecen antagonistas pero que han sido protagonistas en miles de novelas y libros. No obstante,…

close

5 cosas que todo diseñador debe saber

Existen algunas cosas que en ámbito profesional todo diseñador debe saber; se trata de principios fundamentales de venta y trabajo que no debemos dejar pasar. Aún así, en ocasiones las pasamos por alto debido a…

close

play_circle_outline ELMO es despedido de plaza sésamo por culpa de Trump

What’s Trending un sitio web no ha tardado en reaccionar a las declaraciones del presidente Donald Trump; declaraciones en las cuales se anuncia el recorte presupuestal a los programas de arte y humanidades para televisión….

close

play_circle_outline Burger King regala Whoppers de por vida a victimas de bullying por su apellido

Burger King ha iniciado una campaña para premiar a aquellos que ha sufrido Bullying; sin embargo, esto no aplica a todos; ya que únicamente se esta centrando en aquellos que han sufrido de esta practica…

close

play_circle_outline Mira el creativo curriculum en forma de pizza de un diseñador, simplemente genial

Tener creatividad cuando nos dedicamos al negocio de la creatividad es algo imprescindible; y es que muchos en ocasiones se limitan a copiar las obras de aquellos que han tenido éxito. Sin embargo, aún quedan…

notifications Recién publicamos
close