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
- 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;
www.elserver.com
Hosting Web 2.0 - La Empresa que sobrepasa todas las expectativas...
www.slicercss.com
Tus diseños en PSD a archivos XHTML y CSS validos
www.Tilidom.com
Almacenar toda tu informacion, incluyendo fotos, videos y musica.
TheDaVis Blog — Efecto de fondo degradado con CSS
23 - 09 - 2007
Permalink
[...] Xyberneticos En: Recursos — Septiembre 24, 2007 [...]
links for 2007-09-24 « D e j a m e S e r
23 - 09 - 2007
Permalink
[...] Bonita técnica para lograr fondos desvanecidos o degradados « Xyberneticos (tags: images) [...]
Tip CSS - texto con pie de página desvanecido « Edusanver’s Weblog
23 - 09 - 2007
Permalink
[...] y si deseas descargarlo puedes hacerlo desde aqui: http://css-tricks.com/examples/FadeOutBottom.zip sino te basta con esto y quieres leer en detalle el articulo: http://www.xyberneticos.com/index.php/2007/09/23/bonita-tecnica-para-lograr-fondos-desvanecidos-o-de... [...]
Alvaro
23 - 09 - 2007
Permalink
He estado intentando colocar este fondo degradado en una caja de texto y en una
celda de una tabla pero no logro que se visualice en el explorador. Segui sus pasos pero aun no sale nada. Le agradezco de antemano que me puedan ayudar Gracias...
______________________________________________________________________________
NOTA: Estoy programando en PHP5 con dreamweaver.
Alvaro
23 - 09 - 2007
Permalink
Hola, se me ha presentado otro inconveniente, dentro de la CCS, existe una instruccion que dice: position: fixed;
La palabra "fixed", aparece subrayada con rojo y cuando posiciono el cursor sobre la misma aparece el siguiente comentario: Value 'fixed' is not supported for CCS property position [Microsoft Internet Explorer 5.0,Microsoft Internet Explorer 5.5,Microsoft Internet Explorer 6.0].
Espero pronto su ayuda.
_______________________________________________________________________________
La version de mi internet explorer es: 6.0.2900.2180 Y tengo Windows XP SP2
Reynier Matos Padilla
23 - 09 - 2007
Permalink
Está excelente este efecto. Es uno de los mejores que he visto.
Gracias por compartirlo con nosotros!!
ROXANA
23 - 09 - 2007
Permalink
MIL GRACIAS DE VERDAD, ME FUNCIONO PERFECTO Y YA NO TENGO EL PROBLEMA QUE TENIA CON EXPLORER QUE NO ME MOSTRABA LAS IMAGENES.
Marco Chacon
23 - 09 - 2007
Permalink
Los felicito por el diseño está muy bueno!!!!