CSS Trick: Fade Out the Bottom of Pages with a Fixed Position Image
I really like this subtle effect on the fortuito.us blog. the text at the bottom of the page fades away. Even as you scroll the page content up and down, it appears as if it fades away into the bottom of the page.
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");
}The high z-index helps insure it is the top-most layer.
Loading ...
1
Looks really nice! For the last -tag, I added a class (name it as you want, I called it “last”), with margin-bottom: 150px (for a bottom-fade-height of 200px). With this margin, the last paragraph is displayed completely readable. Might help users to read
Comment by Jayzon — October 2, 2007 @ 2:54 pm
2
@Jayzon: Great idea. That is a great way to go. Either that or add the big margin as padding the the page-wrapper.
Comment by Chris Coyier — October 2, 2007 @ 4:19 pm
3
dead in Safari
Comment by nev — December 10, 2007 @ 11:54 am
4
sorry - works in safari 3!
Comment by nev — December 10, 2007 @ 11:57 am
5
I came up with a problem some days ago when I tried to get this nice effect done on my homepage. Since the png is laid over everything else, links are not accessible in the png-area. I don’t think that helps much for usability etc.
Anyway, for pure text sites it’s a nice effect!
Comment by Jayzon — December 11, 2007 @ 5:57 am
6
@Jayzon: Yep, since it’s basically an image sitting right on top of the text, it won’t allow you to “click through” and get to those links. Perhaps a compromise could be to shorten up the fade so it really only covers one line or so.
Comment by Chris Coyier — December 11, 2007 @ 6:15 am
7
Really nice! Work in Internet Explorer!!!
Comment by Reynier Matos Padilla — December 15, 2007 @ 3:05 pm
8
added a width of 100% and made the background repeat-x so that it doesn’t fall short on wider pages.
Question though: in IE6, it just stays at the bottom of the page, not the bottom of whatever point you’re at. Is there a way to fix this?
Comment by Lisa — January 5, 2008 @ 10:09 pm
9
@Lisa - The whole idea isn’t very IE6 friendly at all. You will need to use an absolute positioning hack or some kind of javascript to get it to stay in place as well as a PNG hack to get the alpha transparency. I’d suggest just using an alternate stylesheet for IE 6 and below and not using this at all.
Comment by Chris Coyier — January 7, 2008 @ 4:06 pm