Przejdź do treści

Tło - CSS

Gradient promienisty {background: radial-gradient repeating-radial-gradient}

Jak wypełnić tło płynnym przejściem kilku kolorów, wywołując efekt trójwymiarowej kuli lub oświetlenia latarki?

Gradient promienisty {background: radial-gradient}

CSS 3 - Chrome Firefox Edge Opera Safari

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 {background: radial-gradient}

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 {background: repeating-radial-gradient}

CSS 3 - Chrome Firefox Edge Opera Safari

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 {background: repeating-radial-gradient}

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

Komentarze

Zobacz więcej komentarzy

Facebook