Tło

W tym rozdziale dowiesz się...

Kolor

selektor { background-color: kolor }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "kolor" należy podać definicję koloru. Wpisanie "transparent" ustali tło przezroczyste.

Polecenie umożliwia wstawienie tła o określonym kolorze pod danym elementem (tekstem).

Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tła strony), można użyć selektora BODY lub HTML.

Przykład:

Tło koloru czerwonego (red)

Tło koloru żółtego (yellow)

Tło koloru #D08AFF

Tło koloru systemowego Menu

Tło obrazkowe

selektor { background-image: url(ścieżka dostępu do obrazka) }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie "none" usunie obrazek.

Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML!

Polecenie pozwala wstawić dowolny obrazek jako tło pod elementem. Pamiętaj jednak, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie.

Wspólnie z tą własnością często podaje się dodatkowo kolor tła. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, tło przyjmie podany kolor. Ponadto jeżeli obrazek posiada przezroczystość (np. format *.gif), zostanie ona zastąpiona podanym kolorem.

Jeśli kolor tekstu elementu z tłem obrazkowym jest zbliżony do domyślnego koloru tła strony, wskazane jest podanie dodatkowo takiego koloru tła dla tego elementu, aby tekst był na nim czytelny. Jeżeli tego nie zrobimy, a obrazek nie zostanie wyświetlony, może wystąpić sytuacja typu: "biały tekst na białym tle".

Może się to zdarzyć np. gdy obrazek w tle strony jest dość ciemny. Wtedy określa się zwykle jasny kolor tekstu, zapominając podać równocześnie deklarację ciemnego koloru tła - jako zabezpieczenie. Dopóki obrazek jest widoczny, wszystko jest w porządku, lecz jeśli nie zostanie on wyświetlony, tło przyjmie najczęściej kolor biały (jako domyślny) i w ten sposób otrzymamy stronę, której nie można przeczytać :-(

Przykład:

To jest akapit z tłem obrazkowym. Jak już pisałem, użycie zbyt jaskrawego tła, może znacznie utrudnić czytanie tekstu...

Sztuczka, pozwalająca ustalić rozmiary obrazka w tle...

Wielokrotne tło obrazkowe

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor { background-image: url(ścieżka dostępu do obrazka 1), url(ścieżka dostępu do obrazka 2),... }

Dzięki powyższej składni możliwe jest wstawienie pod jednym elementem wielu obrazków w tle. Będą ona ułożone jeden pod drugim - na wierzchu wyświetli się pierwsza z wymienionych grafik.

MSIE 8 w takim przypadku nie wyświetli żadnego obrazka w tle - nawet pierwszego z kolei!

Przykład:

To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem pierwszoplanowym ułożony jest drugi obrazek... To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem pierwszoplanowym ułożony jest drugi obrazek... To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem pierwszoplanowym ułożony jest drugi obrazek...

Powtarzanie

selektor { background-repeat: powtarzanie }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "powtarzanie" należy wpisać:
  • repeat - powtarzanie tła w obu kierunkach (domyślnie)
  • repeat-x - powtarzanie tła tylko w kierunku poziomym
  • repeat-y - powtarzanie tła tylko w kierunku pionowym
  • no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
  • space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta (CSS 3 - MSIE 9, Opera)
  • round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta (CSS 3 - MSIE 9, Opera)

Polecenie pozwala zdefiniować sposób powtarzania się obrazka w tle obrazkowym. Normalnie kopie obrazka są ustawiane obok siebie tak, że zajmują cały obszar tła. Ale możliwe jest również zdefiniowanie powtarzania w poziomie czy w pionie lub całkowite zablokowanie.

W CSS 3 wprowadzono dodatkowo możliwość oddzielnego określenia sposobu powtarzania tła w poziomie i w pionie. Na przykład "repeat no-repeat" jest równoznaczne z "repeat-x", a "no-repeat repeat" - "repeat-y". Taki rozszerzony sposób staje się bardziej przydatny w przypadku dodatkowych wartości - "space round" i "round space". Dzięki temu możemy precyzyjnie dopasować sposób powielania grafiki w poziomie i w pionie, w zależności od jej wymiarów w stosunku do wymiarów elementu, pod którym wstawiamy tło.

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe.

W przeglądarce Chrome 15 ustawienie trybów powtarzania dostępnych w CSS 3 jest równoznaczne z wartością "no-repeat"!

Przykład:

repeat
repeat-x
repeat-y
no-repeat
space
round
space round

Wielokrotne powtarzanie

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor { background-repeat: powtarzanie obrazka 1, powtarzanie obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inny sposób powtarzania. Jeżeli pominiemy ustawienie sposobu powtarzania następnych obrazków, przejmą one ustawienia z pierwszego.

W MSIE 8 powyższy sposób jest zawsze równoznaczny z wartością "repeat"!

Przykład:

repeat-y, repeat-x

Pozycja

selektor { background-position: pozycja }
Selektorem może być znacznik wyświetlany w bloku albo zastępowany [zobacz: Wstawianie stylów].

Natomiast jako "pozycja" należy wpisać:
  1. Jedną wartość:
    • center - obrazek na środku (w centrum)
    • left - obrazek po lewej
    • right - po prawej
    • top - na górze
    • bottom - na dole
    • jednostka długości - odległość od lewej krawędzi
  2. Dwie wartości (oddzielone spacją):
    • left top - lewy-górny róg
    • left bottom - lewy-dolny róg
    • right top - prawy-górny róg
    • right bottom - prawy-dolny róg
    • dwie jednostki długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej

Pozwala ustalić pozycję obrazka w tle.

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe oraz ograniczymy jego powtarzanie (no-repeat, repeat-x lub repeat-y).

Przykład:

repeat-x; center
repeat-y; center
no-repeat; center
no-repeat; top
no-repeat; right top
no-repeat; right
no-repeat; right bottom
no-repeat; bottom
no-repeat; left bottom
no-repeat; left
no-repeat; left top
no-repeat; 1cm
no-repeat; 25% 50%
no-repeat; 1cm 5mm

Wielokrotna pozycja

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor { background-position: pozycja obrazka 1, pozycja obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inną pozycję. Jeżeli pominiemy pozycję następnych obrazków, przejmą one ustawienia z pierwszego.

W MSIE 8 powyższy sposób jest zawsze równoznaczny z wartością "left top"!

Przykład:

no-repeat; left top, right bottom

Zaczepienie

selektor { background-attachment: zaczepienie }
Jako "zaczepienie" należy wpisać:
  • scroll - przewijanie tła (domyślnie)
  • fixed - tło nieruchome względem okna przeglądarki
  • local - tło nieruchome względem elementu (jeśli posiada on suwaki), ale przewijane względem okna przeglądarki (CSS 3 - MSIE 8, ale nie 9.0; Firefox)
[Zobacz także: Wstawianie stylów]

Normalnie jeśli tłem strony jest grafika, przesuwa się ona razem z tekstem, w miarę przewijania treści okna za pomocą suwaka. Możemy jednak sprawić, że tło będzie przez cały czas nieruchome, nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia:

body { background-image: url(obrazek.jpg); background-attachment: fixed }

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe.

Ponadto należy zwrócić uwagę, że MSIE 6 obsługuje wartość fixed tylko dla elementów przewijalnych (w MSIE 7.0 wszystko jest w porządku).

Różnica pomiędzy wartościami "fixed" a "local" jest taka, że w przypadku drugiej z ich tło pozostaje nieruchome tylko jeśli do przewijania używamy suwaków elementu. Natomiast w przypadku kiedy przewijamy całą stronę albo kiedy sam element nie ma suwaków, wartość ta działa identycznie jak "scroll".

Przykład:

To jest akapit z nieruchomym tłem obrazkowym (obsługuje Firefox, Opera, MSIE 7.0). Przewiń stronę, obserwując grafikę w tle tego akapitu...

To jest akapit z nieruchomym tłem obrazkowym (obsługuje Firefox, Opera, MSIE 7.0). Przewiń stronę, obserwując grafikę w tle tego akapitu...

To jest akapit z nieruchomym tłem obrazkowym (obsługuje Firefox, Opera, MSIE 7.0). Przewiń stronę, obserwując grafikę w tle tego akapitu...

Dla porównania: ten akapit ma przypisane klasyczne tło obrazkowe. Przewiń stronę, obserwując grafikę w tle tego akapitu...

Dla porównania: ten akapit ma przypisane klasyczne tło obrazkowe. Przewiń stronę, obserwując grafikę w tle tego akapitu...

Dla porównania: ten akapit ma przypisane klasyczne tło obrazkowe. Przewiń stronę, obserwując grafikę w tle tego akapitu...

To jest akapit z lokalnie nieruchomym tłem obrazkowym (obsługuje MSIE 8, Firefox). Przewiń element za pomocą jego lokalnych suwaków, obserwując grafikę w tle tego akapitu. Następnie przewiń całą stronę, aby przekonać się, że wtedy tło normalnie się przewija...

To jest akapit z lokalnie nieruchomym tłem obrazkowym (obsługuje MSIE 8, Firefox). Przewiń element za pomocą jego lokalnych suwaków, obserwując grafikę w tle tego akapitu. Następnie przewiń całą stronę, aby przekonać się, że wtedy tło normalnie się przewija...

To jest akapit z lokalnie nieruchomym tłem obrazkowym (obsługuje MSIE 8, Firefox). Przewiń element za pomocą jego lokalnych suwaków, obserwując grafikę w tle tego akapitu. Następnie przewiń całą stronę, aby przekonać się, że wtedy tło normalnie się przewija...

Strona z użyciem background-attachment: scroll - Przykład 1

Strona z użyciem background-attachment: fixed - Przykład 2

Strona z użyciem background-attachment: fixed (oraz no-repeat i center) - Przykład 3

Wielokrotne zaczepienie

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor { background-attachment: zaczepienie obrazka 1, zaczepienie obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inny sposób zaczepienia. Jeżeli pominiemy ustawienie sposobu zaczepienia następnych obrazków, przejmą one ustawienia z pierwszego.

W MSIE 8 powyższy sposób jest zawsze równoznaczny z wartością "scroll"!

Przycinanie

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

selektor { background-clip: przycinanie }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "przycinanie" należy wpisać:
  • border-box - tło wyświetli się pod obramowaniem, marginesem wewnętrznym i właściwą zawartością elementu (domyślnie) [Zobacz: Model pudełkowy]
  • padding-box - tło wyświetli się pod marginesem wewnętrznych i właściwą zawartością elementu
  • content-box - tło wyświetli się tylko pod właściwą zawartością elementu

Możliwe jest również określenie kilku wartości przycinania - kiedy wstawiamy w tle więcej niż jeden obrazek:

selektor { background-clip: przycinanie obrazka 1, przycinanie obrazka 2,... }

Przykład:

border-box
padding-box
content-box

Pozycja początkowa

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

selektor { background-origin: początek }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "początek" należy wpisać:
  • border-box - pozycja tła będzie liczona względem krawędzi obramowania [Zobacz: Model pudełkowy]
  • padding-box - pozycja tła będzie liczona względem krawędzi marginesu wewnętrznego (domyślnie)
  • content-box - pozycja tła będzie liczona względem krawędzi właściwej zawartości elementu

Zgodnie z komputerowym układem współrzędnych punkt zerowy znajduje się zawsze w lewym-górnym narożniku. W przypadku modelu pudełkowego możemy mieć jednak aż trzy takie narożniki - dla różnych obszarów wewnątrz elementu. Ustalenie położenia początkowego okazuje się szczególnie przydatne, jeśli korzystamy również z przycinania tła.

Możliwe jest również określenie kilku wartości pozycji początkowej - kiedy wstawiamy w tle więcej niż jeden obrazek:

selektor { background-origin: początek obrazka 1, początek obrazka 2,... }

Przykład:

no-repeat; left top; border-box
no-repeat; left top; padding-box
no-repeat; left top; content-box

Rozmiary

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

selektor { background-size: rozmiary }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "rozmiary" należy wpisać:
  • contain - skaluje obrazek, zachowując proporcje, tak aby w całości zmieścił się w tle
  • cover - skaluje obrazek, zachowując proporcje, tak aby pokrył cały obszar tła (część grafiki może być niewidoczna)
  • auto - zachowanie domyślne
  • długość - obrazek zostanie przeskalowany do podanego wymiaru
  • wartość procentową - obrazek zostanie przeskalowany względem obszaru pozycjonowania tła
Podanie dwóch z powyższych wartości (np. "150px 100px") pozwala określić osobno szerokość i wysokość obrazka (skalowanie bez zachowania proporcji - rozciąganie grafiki). Aby przeskalować do wysokości, zachowując jego proporcje, jako szerokość należy podać wartość "auto" (np. "auto 100px").

Często zależy nam na wstawieniu w tle strony tylko jednego egzemplarza obrazka (bez jego powielania), ale w taki sposób aby idealnie dopasował się do rozmiarów okna przeglądarki - niezależnie od używanej rozdzielczości ekranu. Powyższe polecenie pozwala uzyskać taki efekt i to bez żadnych sztuczek ani obejść. Trzeba jednak pamiętać, że rozciąganie obrazka nie tylko zniekształca jego proporcje, ale również w przypadku powiększania wpłynie na utratę jakości grafiki. Pamiętaj również, aby nie wstawiać w tle zdjęć o przesadnie dużych wymiarach, ponieważ będą wydłużały czas wczytywania strony.

Możliwe jest również określenie kilku wartości rozmiary tła - kiedy wstawiamy w tle więcej niż jeden obrazek:

selektor { background-size: rozmiary obrazka 1, rozmiary obrazka 2,... }

Przykład:

contain
cover
75px 100px
100% 100%

Atrybuty mieszane

selektor { background: wartości atrybutów }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać konkretne wartości atrybutów, dotyczących tła, które będą oddzielone od siebie spacjami (przy czym można niektóre pominąć). Są to:

Wartość rozmiarów tła (background-size) musi być poprzedzona znakiem ukośnika i musi się znajdować bezpośrednio po wartości pozycji (background-position), np.: "left top / contain". Nie można podać rozmiarów tła bez określenia pozycji, ale można samą pozycję bez rozmiarów.

Polecenie to pozwala w wygodny sposób zdefiniować wszystkie atrybuty tła. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. Wartością może być np.: url(obrazek) (background-image), no-repeat (background-repeat) czy left (background-position). Wszystkie wartości muszą być oddzielone od siebie spacjami. Nie ma wymogu, aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi tła koloru czerwonego (red), ponieważ nie zostało to określone w deklaracji background, która tutaj unieważnia background-color:

p { background-color: red; background: url(tlo.gif) }

Zgodnie z zasadą kaskadowości, oczekiwany skutek (czerwone tło) odniesiemy, podając deklaracje w odwrotnej kolejności:

p { background: url(tlo.gif); background-color: red }

albo przenosząc wartość background-color (red) do zbiorczej deklaracji background:

p { background: red url(tlo.gif) }

W przeglądarce MSIE 8, Firefox i Chrome wstawienie do atrybutów mieszanych wartości własności dostępnych dopiero od CSS 3 skutkuje zupełnym brakiem tła! Dlatego w ich wypadku bezpieczniej jest stosować standardową, a nie skróconą składnię.

Przykład:

Po wpisaniu:
<p style="color: red; background: url(obrazek.jpg) no-repeat left">
	To jest akapit z obrazkiem w tle. obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest powtarzany (jest tylko jeden egzemplarz) oraz jest ustawiony po lewej stronie.
</p>
otrzymamy na ekranie:

To jest akapit z obrazkiem w tle. Obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest powtarzany (jest tylko jeden egzemplarz) oraz jest ustawiony po lewej stronie.


Warto tutaj jeszcze wspomnieć o możliwości dodawania obrazków do dowolnego tekstu. Można w ten sposób stworzyć tekst, obok którego znajduje się jakaś grafika (np. po lewej stronie). Nie trzeba w takim wypadku dodawać znacznika <img>, odpowiadającego za wstawienie rysunku, ale wystarczy np. zadeklarować odpowiednią klasę w zewnętrznym arkuszu stylów, a grafika zostanie dodana jako tło (bez powtarzania). Dodatkowo tekst będzie przesunięty w prawo, aby nie zasłaniał obrazka.

Sposób taki ma tą zaletę, że w każdej chwili możemy usunąć obrazek lub zmienić jego pozycję, bez potrzeby modyfikacji każdej strony, na której występuje taki element. Ma to duże znaczenie, jeśli powtarza się on na wielu stronach. Niestety podczas drukowania strony, obrazek taki zostanie pominęty. Również jeśli przeglądarka nie interpretuje stylów, obrazek nie pojawi się na ekranie. Jeśli nam to przeszkadza, należy stosować tradycyjny sposób (znacznik IMG).

Po wpisaniu w arkuszu stylów:
*.obrazek { background: url(obrazek.jpg) no-repeat left top; padding-left: 110px }
a następnie na stronie:
<p class="obrazek">Po lewej stronie tego tekstu znajduje się obrazek, który... (itd.)</p>
otrzymamy:

Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie...

Uwaga: Pogrubiona wartość 110 w deklaracji klasy powyżej, odpowiada za przesunięcie tekstu w prawo i nie powinna być ona mniejsza od szerokości obrazka (w pikselach), aby nie był on zasłonięty!

Wielokrotne atrybuty mieszane

(CSS 3 - interpretuje Firefox, Opera, Chrome)

selektor { background: wartości atrybutów obrazka 1, wartości atrybutów obrazka 2... }

Korzystając z rozszerzonej składni atrybutów mieszanych, możemy wstawić w tle elementu kilka obrazków i od razu określić dla nich dodatkowe własności, takie jak np. sposób powtarzania, zaczepienie, pozycja / rozmiary, przycinanie czy pozycja początkowa. Trzeba jednak pamiętać, że o ile w tle jednego elementu może być wstawionych kilka obrazków, to ustawienie więcej niż jednego jednolitego koloru tła nie ma sensu. Dlatego podanie jednolitego koloru tła jest dozwolone tylko jeden raz - na samym końcu, tzn. dla ostatniego elementu listy atrybutów mieszanych:

div { background: url(obrazek1.jpg), url(obrazek2.jpg), url(obrazek3.jpg) red }

MSIE 8 w takim przypadku nie wyświetli żadnego tła - ani obrazkowego ani jednolitego koloru!

Gradient liniowy

(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera, Chrome)

selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Kierunek określa sposób rozłożenia barw. Można go podać na dwa sposoby:
  • słowa kluczowe
    • to top - przejście kolorów nastąpi pionowo z dołu do góry (odpowiednik 0deg)
    • to right top - ukośnie z lewego-dolnego do prawego-górnego narożnika
    • to right - poziomo z lewej do prawej strony (odpowiednik 90deg)
    • to right bottom - ukośnie z lewego-górnego do prawego-dolnego narożnika
    • to bottom - pionowo z górny do dołu (odpowiednik 180deg - domyślnie)
    • to left bottom - ukośnie z prawego-górnego do lewego-dolnego narożnika
    • to left - poziomo z prawej do lewej strony (odpowiednik 270deg)
    • to left top - ukośnie z prawego-dolnego do lewego-górnego narożnika
  • kąt - liczony zgodnie z ruchem wskazówek zegara z wartością 0deg skierowaną pionową w górę, a 180deg - pionowo w dół
Kolor1 odległość1, kolor2 odległość2... - kolejne kolory i ich odległości na linii przejścia gradientu. Obowiązkowo trzeba podać przynajmniej dwie pary "kolor odległość". Każda taka para jest rozdzielona od kolejnej znakiem przecinka. Wielokropek (czyli "...") na końcu należy usunąć. Określenie odległości kolorów nie jest obowiązkowe - wtedy podane barwy zostaną rozłożone równomiernie w gradiencie.

Narzędzia tworzące gradienty są znane z edytorów graficznych. Dzięki nim można utworzyć tło, w którym określone barwy będą łagodnie przechodzić pomiędzy sobą. Wcześniej jedyną możliwością wstawienia takiego efektu na stronie WWW było przygotowanie pliku graficznego i umieszczenia go jako tło obrazkowe. Jest to jednak rozwiązanie nieco kłopotliwe, gdyż każdą zmianę trzeba było przygotowywać w programie graficznym. Do tego taki plik graficzny z zapisanym gradientem mógł mieć niemałe rozmiary, niepotrzebnie wydłużając czas wczytywania strony w przeglądarce użytkownika. Dlatego właśnie efekt gradientu wprowadzono do składni CSS, aby dać webmasterom lepszą kontrolę nad wyglądem stron.

Przy definiowaniu wyglądu gradientu kluczowe znaczenie ma tzw. linia gradientu. Musimy sobie ją wyobrazić jako prostą, która przebiega w kierunku przejścia barw z jednej w drugą. Na przykład gdy określimy następujący gradient:

background: linear-gradient(to bottom, black 0%, white 100%)

uzyskamy gradient z kolorem czarnym (black) na górze i białym (white) na dole. Pomiędzy nimi wystąpi łagodne przejście barw poprzez coraz jaśniejsze odcienie szarości. Wynika z tego, że linia gradientu będzie w tym przypadku skierowana pionowo w dół (to bottom):

linear-gradient(black, white)

Linia gradientu ostatecznie nie jest widoczna na ekranie. Pomaga tylko w wyobrażeniu sobie, jak będzie przebiegało przejście kolorów.

Dowolny gradient możesz skomponować za pomocą specjalnego generatora.

Przykład:

linear-gradient(black, white)
linear-gradient(to bottom, black, red, white)
linear-gradient(180deg, black, red 75%, white)
linear-gradient(to right, red, orange, yellow, lime, blue, purple, fuchsia)

Kierunek "to right top" zwykle nie jest tym samym co kąt 45deg. Użycie słów kluczowych powoduje, że linia gradientu zawsze będzie skierowana idealnie do podanego narożnika, podczas gdy dla kąta 45deg uzyskamy taki efekt tylko dla elementów kwadratowych.

linear-gradient(to right top, black, white)
linear-gradient(45deg, black, white)
linear-gradient(-45deg, white, black)
linear-gradient(to left top, white, black)

Zwróć uwagę, że kolory na styku poziomej linii, łączącej powyższe elementy, nie pokrywają się idealnie ze sobą.

Powtarzany gradient liniowy

(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera)

selektor { background: repeating-linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) }

Jeżeli ustawimy odległość punktu początkowego linii gradientu większą od 0% (albo punktu końcowego mniejszą od 100%), tło przed punktem początkowym (albo po końcowym) przyjmie jednolity kolor. Możemy jednak określić, żeby w takim przypadku gradient był powtarzany w kółko, dzięki czemu na całej powierzchni uzyskamy płynne przejścia kolorów. Ten sposób może być przydatny czasami, gdy nie znamy dokładnych wymiarów elementu, do którego dodajemy gradient.

Przykład:

repeating-linear-gradient(black 33%, white 66%)

Dla porównania - tak będzie wyglądał ten sam gradient, ale już bez powtarzania:

linear-gradient(black 33%, white 66%)

Gradient promienisty

(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera, Chrome)

selektor { background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Jako kształ należy wpisać:Rozmiar można ustalić na trzy sposoby:
  • słowa kluczowe:
    • closest-side - gradient będzie się rozchodził do najbliższej krawędzi elementu
    • farthest-side - do najdalszej krawędzi
    • closest-corner - do najbliższego narożnika
    • farthest-corner - do najdalszego narożnika (domyślnie)
  • promień - podany za pomocą jednostek długości lub procentowo
  • poziom pion - poziomy i pionowy promień elipsy, określony za pomocą jednostek długości lub procentowo
Pozycję definiuje się identycznie jak w przypadku położenia tła obrazkowego.

Kolor1 odległość1, kolor2 odległość2... - oznaczają to samo, co w przypadku gradientu liniowego.

Gradient promienisty jest tworzony analogicznie jak liniowy, tylko kolory rozchodzą z jednego punktu (domyślnie w centrum powierzchni) równomiernie na zewnątrz we wszystkich kierunkach, aż do narożnika elementu. Wygląda to tak, jakbyśmy patrzyli na oświetloną kulę (bądź elipsoidę) albo powierzchnię oświetloną latarką. Zatem linia gradientu biegnie ze środka na zewnątrz:

radial-gradient(white, black)

Większość zmiennych w deklaracji gradientu promienistego jest opcjonalna. Prawdę mówiąc składnia polecenia jest dość złożona:

radial-gradient(
  [ [ circle || <length> ] [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
    [ [ circle | ellipse ] || [ closest-corner | closest-side | farthest-corner | farthest-side ] ] [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

Z powodu złożoności składni gradientu promienistego, przy jego komponowaniu polecam skorzystać ze specjalnego generatora.

Przykład:

radial-gradient(white, black)

Jeżeli identyczną deklarację gradientu wstawimy pod elementem prostokątnym, zamiast okręgu otrzymamy elipsę:

radial-gradient(white, black)

Różnice w rozmiarze gradientu w zależności od użytych słów kluczowych:

radial-gradient(closest-side at 25% 75%, white, black)
radial-gradient(farthest-side at 25% 75%, white, black)
radial-gradient(closest-corner at 25% 25%, white, black)
radial-gradient(farthest-corner at 25% 25%, white, black)

Inne ciekawe przykłady:

radial-gradient(at 50% 110%, lightskyblue 40%, fuchsia, purple, blue, lime, yellow, orange, red, lightskyblue 60%)
radial-gradient(ellipse 33% 66% at right top, white, red 75%, black)

Powtarzany gradient promienisty

(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera)

selektor { background: repeating-radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) }

W przypadku gradientu promienistego szczególnie często zdarza się, że duże powierzchnie tła już poza gradientem są jednolitego koloru. Możemy temu zapobiec poprzez powtarzanie wzoru w kółko.

Przykład:

repeating-radial-gradient(white 33%, black 66%)

Dla porównania - tak będzie wyglądał ten sam gradient, ale już bez powtarzania:

radial-gradient(white 33%, black 66%)

Usunięcie tła

selektor { background: none }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Polecenie umożliwia wykasowanie zdefiniowanego wcześniej tła. Okazuje się ono przydatne, częściej niż można by sądzić. Na przykład wyobraźmy sobie, że w zewnętrznym arkuszu stylów określamy ogólne własności dla wszystkich stron naszego serwisu. Załóżmy, że znajduje się tam m.in. deklaracja tła obrazkowego stron. Jeśli teraz zechcemy tylko na jednej ze stron zastosować zwykłe tło, a jednocześnie na innych pozostawić nadal obrazkowe, może to uczynić na dwa sposoby:

  1. Nie dołączać zewnętrznego arkusza do wybranej strony. Takie rozwiązanie nie jest jednak zbyt dobre, ponieważ musimy ręcznie wpisywać wszystkie inne deklaracje, które znajdują się w arkuszu (np. kolor tekstu na stronach), pomijając przy tym tą, która odpowiada za tło. Chociaż początkowo osiągniemy żądany efekt, jednak przy każdej modyfikacji szaty graficznej serwisu, będziemy zmuszeni modyfikować również taką stronę. Nie dość, że jest to uciążliwe (zwłaszcza gdy istnieje więcej takich stron), to po jakimś czasie możemy po prostu zapomnieć o tej dodatkowej modyfikacji, co sprawi, że strona taka będzie różniła się wyglądem od innych.
  2. W wewnętrznym arkuszu wybranej strony lub w stylu inline można umieścić przedstawione powyżej polecenie. Możemy wtedy bez przeszkód dołączyć zewnętrzny arkusz i nie musimy za każdym razem oddzielnie modyfikować takiej strony.

Jak widać drugi sposób jest znacznie korzystniejszy. Dodatkowo istnieją sytuacje, gdy pierwsza metoda jest wręcz niemożliwa do zastosowania, np. w przeglądarkach odsyłacze są zwykle domyślnie podkreślane. Jeśli chcemy z tego zrezygnować, musimy usunąć dekorację tekstu:

a:link, a:visited { text-decoration: none }

Dla wielu innych własności stylów istnieją analogicznie działające wartości - zwykle są to: none, normal, auto, transparent itp.

Polecenie background: ;none usuwa wszystkie własności dotyczące tła. Można również usunąć tylko wybrane, stosując odpowiednie polecenia dla każdej własności, którą chcemy usunąć (np. background-color: transparent; background-image: ;none; itd.). Pozwala to np. usunąć tło obrazkowe, lecz pozostawić kolor tła. Działają one oczywiście nie tylko z zewnętrznym arkuszem, ale również z wewnętrznym - zgodnie z zasadami kaskadowości.

Przykład:

Gdyby arkuszu stylów tej strony [zobacz: Wstawianie stylów], została umieszczona taka linijka:
h4 { background-color: red }
to wszystkie tytuły rzędu czwartego miałyby automatycznie przypisane tło koloru czerwonego. Ale jeśli chcemy zrezygnować z tła dla wybranych elementów, wystarczy wpisać background-color: transparent w definicji inline:
<h4 style="background-color: transparent">To również jest tytuł rzędu czwartego, lecz mimo to nie ma już tła</h4>