Columnas transparentes con CSS

Escrito por J.F. el Lunes, 18 de Febrero del 2008 a las 17:20

Si quieres realizar columnas con transparencias, pero quieres evitarte el quebradero de cabeza de andar jugando con imágenes png y las diferentes versiones de los navegadores, aquí un código para realizar columnas transparentes con CSS. Usando algunos hacks y técnicas avanzadas, el resultado conseguido es increíble. Simplemente hemos de usar el siguiente código HTML:

TEXTO PLANO

HTML:

1. <div id="column-1" class="container">
2.    <div class="overlay"></div>
3.    <div class="content">
4.      <h2>Content</h2>
5.    </div>
6.  </div>

Ahora veamos el código CSS correspondiente a las clases utilizadas arriba:

TEXTO PLANO

CSS:

1. #column-1 {
2.  position: relative;
3.  float: left;
4.  width: 500px; /* remember to set a width */
5.  }
6.  
7.  .overlay{
8.  position: absolute;
9.  top: 0; /* These positions makes sure that the overlay */
10.  bottom: 0;  /* will cover the entire parent */
11.  left: 0;
12.  width: 100%;
13.  background: #000;
14.  opacity: 0.65;
15.  -moz-opacity: 0.65; /* older Gecko-based browsers */
16.  filter:alpha(opacity=65); /* For IE6&amp;7 */
17.  }
18.  
19.  #column-1 .content {
20.  width: 460px;
21.  padding: 20px;
22.  }
23.  
24.  .content {
25.  position: relative;
26.  }

Y el hack para IE6:

TEXTO PLANO

CSS:

1. * html #column-1 .overlay {
2. height: expression(document.getElementById("column-1").offsetHeight);
3. }

Enlaces: | Demo | Vía | Autor original

Categoria: CSS

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Deja un comentario

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>