Jak zrobić efekt zanikającej strony? [CSS]

W tym triku pokażemy, jak zrobić ciekawie wyglądający efekt zanikającej strony. Całość jest bardzo prosta i ogranicza się do zaledwie kilku linijek kodu.

Cały trik polega na umiejętnym podstawieniu grafiki w formacie PNG (z kanałem alpha) i takie jej uplasowanie, aby zawsze była na dole ekranu.

Grafika do pobrania jest tutaj [prawy przycisk - zapisz element docelowy jako...].

Przykład działania możecie sprawdzić tutaj. W kodzie znalazło się nawet miejsce na fix dla IE6.

* {
margin: 0;
padding: 0;
border: 0;
}
 
body {
font-family: "Lucida Grande", Georgia, sans-serif;
font-size: 67.5%;
}
 
p {
font-size: 1.1em;
line-height: 1.6em;
}

#page_wrap {
width: 600px;
z-index: 1;
margin: 10px auto;
}

#bottom_fade {
width: 600px;
height: 200px;
z-index: 99;
position: fixed;
bottom: 0px;
background: url("bottom-fade.png") bottom center no-repeat;
}