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.
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.
- Enlace: Fade Out Bottom
- Descargar demo: fadeoutbottom.zip








1 — kerberoS
18/09/2007 08:37 pm — ResponderExcelente
Estaba buscadon algo por el estilo
2 — Horacio Bella
19/09/2007 09:25 am — ResponderFui probándolo en el blog, estuve a punto de dejárlo, pero decidí finalmente que no.
3 — meneame.net
20/09/2007 10:58 am — ResponderHacer que el fondo de tu web se desvanezca…
Con un poco de CSS y estas instrucciones puedes hacer que el fondo de tu web se vaya desvaneciendo….
4 — Horacio Bella
20/09/2007 04:38 pm — ResponderAquí hay un ejemplo muy bueno:
http://fortuito.us/
5 — karliky
21/09/2007 08:00 am — Responderme funciona en opera pero no en IE
6 — Horacio Bella
21/09/2007 11:01 am — ResponderKarkily:
Em Internet Explorer 6 no funciona debido a que no lo hace la transparencia de los PNG. En este enlace se explica como solucionarlo.
7 — federica
22/09/2007 09:39 pm — Responderhola bren ,sos la mejor ,te dejo mi msn es:federicagiobe.hotmail.com .porfis agregame yo no te jodo si te conectas porfus
8 — Bonita técnica para lograr fondos desvanecidos o degradados « Xyberneticos
23/09/2007 02:54 am — Responder[...] Por medio de Horacio (granimpetu) veo un tip bastante interesante, sencillo y agradable. Fade Out Bottom, una técnica muy sencilla que nos servirá para realizar en nuestro pie de pagina un efecto desvanecimiento o degradado. Básicamente lograremos esto mediante una imagen PNG diseñada previamente y la cual poseerá transparencia, un poco de CSS para crear el fixed (flotamiento) en la imagen, y el DIV que utilizaremos para llamarlo desde nuestra pagina. Si quieren ver lo que lograremos con esto: ejemplo 1 y Ejemplo 2 [...]
9 — MiBlog » Blog Archivos » Bonita técnica para lograr fondos desvanecidos o degradados
23/09/2007 03:33 pm — Responder[...] Por medio de Horacio (granimpetu) veo un tip bastante interesante, sencillo y agradable. Fade Out Bottom, una técnica muy sencilla que nos servirá para realizar en nuestro pie de pagina un efecto desvanecimiento o degradado. Básicamente lograremos esto mediante una imagen PNG diseñada previamente y la cual poseerá transparencia, un poco de CSS para crear el fixed (flotamiento) en la imagen, y el DIV que utilizaremos para llamarlo desde nuestra pagina. Si quieren ver lo que lograremos con esto: ejemplo 1 y Ejemplo 2 [...]