Submit your widget
HomeText & Link EffectsVery sample Fade Out the Bottom with text

Very sample Fade Out the Bottom with text

Created 14 years ago   Views 10229   downloads 1910    Author Chris Coyier
Very sample Fade Out the Bottom with text
View DemoDownload
98
Share |

This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0px;) with a transparent PNG image and a high z-index value. There is also a fix in place for IE 6.

This can be achieved with a transparent image that is in a fixed position on the page, like so: 

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

You might also like