CSS – fondos desvanecidos o degradados
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
- Enlace: Fade Out Bottom
- Descargar demo: fadeoutbottom.zip
CSS:
#bottom_fade {
width: 600px;
height: 200px;
z-index: 99;
position: fixed;
bottom: 0%;
background-image: url(“bottom-fade.png”);
}
La llamada desde nuestra pagina:
HTML:
<div id=”bottom_fade”></div>
Ya hemos hablado más de una vez de los problemas que existen con las imágenes PNG con transparencia e Internet Explorer. Por lo tanto si deseamos que este efecto se vea en todos los navegadores ha excepción de Internet Explorer 6 y versiones más antiguas, al selector #bottom_fade le agregaremos:
CSS:
visibility: visible !important;
visibility: hidden;