Tło tonalne strony

z wykorzystaniem edytora GIMP
i/lub opcjonalnie CSS3

Klasyczna metoda tworzenia tonalnego tła strony internetowej, polega na wykonaniu grafiki o 1px szerokości lub wysokości (w zależności od układu) i zdefiniowaniu stylu CSS, który ten motyw powtórzy.

Nowe możliwości definiowania wypełnienia w CSS3 upraszczają w niektórych wypadkach ten proces.

Przykład 1

1. Uruchom edytor graficzny GIMP.
2. Z menu Plik wybierz Nowy.
3. W oknie Utworzenie nowego obrazu ustaw atrybuty Szerokość i Wysokość na 100 px i zaakceptuj przyciskiem OK.
4. Na przyborniku kliknij przycisk Gradient a oknie dokowanym Edytor gradientów.
5. Kliknij przycisk koloru aktywnego i ustaw jego wartość na rgb(51, 51, 51).
6. Kliknij przycisk koloru tła i ustaw jego wartość na rgb(204,204,204).
7. Wypełnij (przeciągnij myszką pionowo) gradientem obraz.
8. Z menu Obraz wybierz Wymiary płótna... i ustaw szerokość na 1px.
9. Wyeksportuj obraz do pliku tlo1.png.
   
10. Utwórz plik strony internetowej p1.html i zdefiniuj styl CSS definiujacy tło:
    body {
    background: url(tlo1.png) repeat-x rgb(204,204,204);
    }

Efekt 1

 Przykład 2

1. Utwórz plik strony internetowej p2.html i zdefiniuj styl CSS definiujący tło:
   body {
   background: linear-gradient(rgb(51,51,51), rgb(204,204,204) 100px) fixed;
   }

Efekt 2

Zadanie

Wykonaj  grafikę, która będzie motywem tła strony internetowej z wykorzystaniem powtarzania pionowego.

Sprawdź efekt na przykładowej stronie. Porównaj otrzymany rezultat z zastosowaniem stylu CSS3.

Teoria
Tło i obramowanie w CSS3

Obraz i gradienty w CSS3