Czary z tłem

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

szukaj: tło background 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:

• * - aby móc zobaczyć ten efekt musisz pobrać zestaw grafik
• 1 - dopisuję do reguły body, kolejną właściwość. Jest to skrót, który należy rozumieć: wczytaj grafikę 'szare.jpg' [url(szare.jpg], a gdzie jej nie będzie daj czarne tło [black], grafikę w tle ustaw 128px od początku strony [128px] i 5px od góry [5px], obrazku w tle nie powtarzaj [no-repeat] i nie przesuwaj [fixed]. Uwaga! Efekt osiągnięty tym sposobem nie będzie działać w MSIE:-(

• 2 - ten sam skrót. Jedyne co się zmieniło to kolor tła i grafika.
• 3 - usunąłem deklaracje koloru tła, gdyż są one już zapisane we wcześniejszej regule.
• 4 - inna grafika w tle, a także brak koloru. 'Transparent' nie jest żadnym kolorem, oznacza "przezroczyste", czyli bedzie przebijać to co jest poniżej.
• 5 - do dolnych warstw wczytuje tą samą grafikę i ten sam kolor tła.

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

szukaj: tło background kurs css

Zagadnienia poruszane w tej części kursu:

• Pozycjonowanie - wstęp
• Warstwa do warstwy i mamy stronę
• Wypozycjonowana strona
• Czary z tłem