Przejdź do treści

Tło

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%)

Komentarze

Zobacz więcej komentarzy