Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-css/32-czary-z-tlem.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Czary z tłem |
Wpisany przez Patryk yarpo Jar | |||
piątek, 18 września 2009 02:54 | |||
Czary z tłemJuż wielokrotnie powtarzałem podczas tego kursu, że CSS ma wielkie możliwości i bardzo łatwo jest wykrzesać ciekawe efekty. po tej lekcji chyba powinieneś się już do tego całkowice przekonać. Do pliku css dorzucimy tylko kilka linijek, a oblicze strony zmieni się niczym za dotknięciem czarodziejskiej różdżki... body { margin: 0; padding: 0; background: black url(szare.jpg) 128px 5px no-repeat fixed; } // 1 div { margin: 0; padding: 0; border: 1px solid silver; position: absolute; } div#w01, div#w02, div#w03 { top: 5px; background: #848484 url(biale.jpg) 128px 5px no-repeat fixed; } // 2 div#w01 { left: 128px; width: 200px; height: 200px; /* usunięto : background-color: silver; */ // 3 z-index: 1;} div#w02 { right: 128px; width: 200px; height: 200px; /* usunięto : background-color: silver; */ // 3 z-index: 2;} div#w03, div#w04 { left: 338px; right: 338px; height: 20px; background: #848484 url(biale.jpg) 128px 5px no-repeat fixed; // 2 z-index: 3; min-width: 200px;} div#w04 { top: 185px; z-index: 4;} div#banner { top: 35px; left: 138px; right: 138px; height: 140px; background: transparent url(podstawowe.jpg) 128px 5px no-repeat fixed; // 4 z-index: 10;} div#menu { top: 215px; left: 128px; width: 200px; background: #c8c8c8 url(jasne.jpg) 128px 5px no-repeat fixed; // 5 z-index: 15; } div#tresc { positon: static; margin: 215px 128px 0 338px; background: #c8c8c8 url(jasne.jpg) 128px 5px no-repeat fixed; // 5 z-index: 25; min-width: 550px; } Opis: Cały efekt polega na tym, że wszystkie tła są umieszczane względem początku strony, czyli ładnie będą do siebie pasować. Dodatkowo, dzięki 'fixed' nie będą się przesuwać wraz z zawartością strony - dany fragment tła będzie zawsze w tym samym miejscu. Nie da się tego tak dokładnie opisać - to trzeba zobaczyć. Zapisz to i odpal przeglądarkę [Operę8.0 lub FF1.0], a zobaczysz dlacego tak nazwałem tą lekcję. Aha, aby dokładniej zobaczyć efekt w 'tresc' wpisz kilkanaście akapitów - tak by pokazał się przesuwak. Tags:
|