Submit your widget

Very sample Fade Out the Bottom with text

Created 14 years ago   Views 10248   downloads 1919    Author Chris Coyier
Very sample Fade Out the Bottom with text
View DemoDownload
99
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");
}