Si por esas casualidades estabas tratando de hacer que el fondo de tu página web tenga un efecto como si el contenido se estuviese desvaneciendo te informo que con CSS es muy fácil hacerlo. Aquí podemos ver un ejemplo de como quedaría.

Como se habrán dado cuenta esto se logra colocando una imagen PNG transparente a lo largo del fondo de la página ubicado con la propiedad fixed de Cascading Style Sheets”>CSS. Para hacerlo colocamos en cualquier parte de nuestra página un div al cual luego le pondremos como fondo esta imagen. Recomiendo colocarlo en el footer para que sea lo último en cargar.

<div id="bottom_fade"></div>

A continuación agregamos las siguientes propiedades Cascading Style Sheets”>CSS:

#bottom_fade {
width: 600px;
height: 200px;
z-index: 99;
position: fixed;
bottom: 0%;
background-image: url("bottom-fade.png");
}

Obviamente podemos modificar el ancho y el alto a las medidas que mejor se adapten a nuestro diseño. Algo importante a tener en cuenta es que las transparencias de PNG no funcionan en Internet Explorer 6, aunque podemos usar algunos métodos para solucionar esto.

Si lo que queremos hacer es que se vea en todos los navegadores con excepción de Internet Explorer 6 (o versiones previas) podemos agregar estas propiedades al selector #bottom_fade:

visibility: visible !important;
visibility: hidden;

En algunos casos puede resultar algo molesto encontrarnos con este detalle, ya que la porción donde se realizar el fade out queda inutilizable, es decir, si por ejemplo hay un enlace que queda cubierto por ese sector, no podremos hacer click sobre él. La utilización o no de este elemento decorativo deberá ponerse en la balanza con el nivel de usabilidad que perdemos.

• Martes 18 de Septiembre de 2007 a las 20:11 ~ Translate to english
• Categorías ~ Diseño
• 9 comentarios realizados ~ Enlaces a esta entrada
• Digg ~ Menéame ~ del.icio.us ~ Fresqui ~ Mister Wong
• Enlazar este post ~
• Enlace corto ~
• ← Minimalismo
• Acordeón en AJAX →