webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 7

Czary z tłem

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-16

szukaj: tło tło background background kurs css kurs css

Już 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łkowicie 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 dlaczego tak nazwałem tą lekcję. Aha, aby dokładniej zobaczyć efekt w 'tresc' wpisz kilkanaście akapitów - tak by pokazał się przesuwak.

Patryk 'yarpo' Jar

Zagadnienia poruszane w tej części kursu:

Chcesz zaistnieć w sieci?
Tworzenie stron www.
Odwiedź naszą stronę!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org