publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
skomentuj »

TAGI: css , tips & tricks

2011-06-27 09:12  |  Paweł Gazda

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

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;

}

źródło: css-tricks.com

publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
skomentuj »

Polecane książki

Czytaj Webhosting

Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.

Zarejestruj domenę

Sprawdź dostępność swojej domeny:

.pl: 0 zł   .com: 19.90 zł
.com.pl: 0 zł   .eu: 19.90 zł