Optimiza tus imágenes gratis sin perder calidad y mejora la velocidad de tu página web: Compresor de Imágenes JPG/PNG/GIF

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

N64 Mini, el nuevo vende-nostalgia de Nintendo llegaría en 2018

Nintendo sigue en pie con su estrategia de vender nostalgia al público; su último intento fue el SNES Mini, el cual, puede decirse pasó desapercibido en comparación de su primer intento; el NES Mini. Una…

close

play_circle_outline Hey Arnold: The Jungle Movie estrena su primer trailer

Hey! Arnold The Jungle Movie es la película de una de las series más queridas y representativas de Nickelodeon en los 90’s; este primer trailer nos muestra como los personajes de la serie muestran agradecimiento…

close

33 vídeos que enseñan como usar photoshop para principiantes

En Petapixel han realizado una recopilación un tanto interesante que te será útil si buscas aprender Photoshop; esta herramienta de diseño primordial y básica para aquellos que incursionan en el mundo del diseño gráfico. Este…

close

Google Street View te lleva al espacio con un mapping de la ISS

Todos conocemos Google Street View; ésa magnífica tecnología que nos permite conocer el mundo sin movernos del ordenador; y que la mayoría ocupa para ver su propia casa desde su computadora; ha recibido un añadido…

close

11 Cualidades que caracterizan a las personas productivas

El día de hoy quiero compartir con ustedes una infografía creada por el sitio web Entrepreneu; el cual, ha creado una lista de 11 actividades que las personas “súper productivas” realizan diferente a las personas…

close

Divertidas fotografías de animales que parecen posar para su nuevo album

En BoredPanda han recopilado alguna fotografías que nos sacarán una sonrisa; las cuales, están centradas en diversos grupos de animales que parece que posan para la portada de su nuevo álbum musical. Estas divertidas fotografías…

notifications Recién publicamos
close