Funkcja CSS linear-gradient() tworzy gradient liniowy, czyli płynne przejście tonalne między dwoma lub większą liczbą kolorów po linii prostej. Gradienty w CSS są specjalnym rodzajem grafiki, a więc definiujące je funkcje mogą być używane wszędzie tam, gdzie jako wartość jest przyjmowany obraz graficzny, np. we własności background
.
Wartości i składnia
Funkcja linear-gradient()
ma następującą składnię:
[ [ <kąt> | to <strona-lub-róg> ] || <metoda-interpolacji-kolorów> ]? , <lista-punktów-koloru>
Poniżej znajduje się opis poszczególnych elementów tej składni.
Kąt
Parametr kąt może być dowolną wartością kątową, także ujemną. Określa on kąt ustawienia linii gradientu, który decyduje o kierunku gradientu. Domyślnie gradient liniowy biegnie od góry do dołu, ale za pomocą tego parametru można dowolnie ten kierunek zmienić.
Wartość 0deg
oznacza górną krawędź, czyli sprawia, że gradient biegnie od dolnej krawędzi obszaru gradientu do górnej. Wartość 90deg
oznacza prawą stronę, 180deg
– dół, 270deg
lewą stronę, a 360deg
– znowu górę itd., np.:
Efekt:
Strona lub róg
Ten parametr może przyjmować jedno kierunkowe słowo kluczowe lub dwa takie słowa i jest wprowadzany przez słowo kluczowe to
. Jeśli po to
podane jest tylko jedno słowo kluczowe, to określa ono stronę, w którą ma biec gradient. Jeśli są podane dwa słowa kluczowe, to określają róg. Oczywiście jeśli używane są dwa słowa kluczowe, to należy je mieszać według zasady po jednym ze zbiorów (left
, right
) i (top
, bottom
).
Definicja formalna:
<strona-lub-róg> = [left | right] || [top | bottom]
Przykład:
Efekt:
Metoda interpolacji kolorów
Ten parametr umożliwia wybór przestrzeni kolorów, w której ma być przeprowadzona interpolacja kolorów gradientu. Składa się on ze słowa kluczowego in
, po którym następują nazwa wybranej przestrzeni kolorów, metoda interpolacji (dotyczy tylko przestrzeni polarnych) i słowo kluczowe hue
, np.:
Efekt:
Dostępne są dwa rodzaje przestrzeni kolorów: polarne i prostokątne:
Wyróżnia się dwa rodzaje przestrzeni kolorów: polarne i prostokątne:
- Prostokątne przestrzenie kolorów:
srgb
,srgb-linear
, lab,oklab
,xyz
,xyz-d50
,xyz-d65
- Polarne przestrzenie kolorów:
hsl
,hwb
,lch
,oklch
Dla polarnych przestrzeni kolorów dostępny jest zestaw dodatkowych opcji pozwalających wybrać kierunek wyboru barw z koła barw:
shorter
– interpolacja po krótszym łukulonger
– interpolacja po dłuższym łukuincreasing
– wybór łuku zgodnie z kierunkiem ruchu wskazówek zegaradecreasing
– wybór łuku przeciwnie do kierunku ruchu wskazówek zegara
Na stronie Gradienty w CSS znajduje się dokładny opis metod interpolacji kolorów.
Definicje formalne:
<metoda-interpolacji-kolorów> = in [ <prostokątna-przestrzeń-barw> | <polarna-przestrzeń-barw> <metoda-interpolacji-barw>? ] <prostokątna-przestrzeń-barw> = srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65 <polarna-przestrzeń-barw> = hsl | hwb | lch | oklch <metoda-interpolacji-barw> = [ shorter | longer | increasing | decreasing ] hue
Lista punktów koloru
Punkty koloru to miejsca na przestrzeni gradientu reprezentujące kolory składające się na ten gradient. Jeśli na przykład gradient składa się z dwóch kolorów, to ma dwa punkty koloru – jeden na początku linii gradientu, a drugi – na jej końcu. Jeśli gradient składa się z pięciu kolorów, to ma pięć punktów koloru.
Dokładny opis punktów koloru znajduje się w sekcji listy Punkty koloru na stronie Gradienty w CSS. Poniżej natomiast znajduje się szczegółowy opis składni tych punktów w funkcji CSS linear-gradient()
.
Najprostsza lista punktów koloru może zawierać tylko dwie definicje kolorów i nic więcej, np.:
Dodatkowo między każdą parą kolorów może znajdować się definicja wskazówki koloru, czyli liczba z jednostką długości lub wartość procentowa, określająca pozycję środka przejścia między tymi dwoma kolorami.
Z kolei sama definicja punktu koloru może zawierać tylko definicję koloru, albo definicję koloru i jedną lub dwie liczby z jednostką długości lub wartości procentowe. Jedna liczba z jednostką długości lub wartość procentowa określa umiejscowienie punktu koloru w konkretnym miejscu obszaru gradientu.
Natomiast dwie liczby z jednostką długości lub wartości procentowe określają rozmiar obszaru, na jakim dany kolor jest jednolity, oraz są równoważne z dwiema definicjami tego samego koloru, np. obie poniższe deklaracje znaczą to samo:
Gdyby jedna z powyższych deklaracji została zastosowana do elementu div
o szerokości 400 pikseli, to pierwszy punkt koloru czerwonego znalazłby się w odległości 40 pikseli od lewej krawędzi elementu, a drugi – w odległości 80 pikseli od lewej krawędzi. Między nimi znajdowałby się obszar jednolitego koloru czerwonego o szerokości 40 pikseli.
Należy pamiętać, że punkt koloru, to miejsce, w którym dany kolor jest w pełni wyrażony. W powyższym przykładzie punkty kolorów żółtego, czerwonego i zielonego celowo zostały ustawione w taki sposób, aby uzyskać ostre granice między nimi, co ułatwia dostrzeżenie omawianego efektu. Gdyby usunięto wartości procentowe z punktów kolorów żółtego i zielonego, między nimi powstałyby stopniowe przejścia tonalne. W takim przypadku punkty koloru czerwonego nadal znajdowałyby się w tym samym miejscu i kolor czerwony byłby jednolity na tym samym obszarze, ale byłoby to trudniejsze do dostrzeżenia gołym okiem:
Składnia formalna listy punktów koloru:
<lista-punktów-koloru> = <punkt-koloru> , [ <wskazówka-koloru>? , <punkt-koloru> ]# <punkt-koloru> = <kolor> <długość-punktu-koloru>? <wskazówka-koloru> = <długość-procent> <długość-punktu-koloru> = <długość-procent>{1,2}
Podsumowanie składni
Poniżej znajduje się podsumowanie składni funkcji CSS linear-gradient()
.
[ [ <kąt> | to <strona-lub-róg> ] || <metoda-interpolacji-kolorów> ]? , <lista-punktów-koloru> <strona-lub-róg> = [left | right] || [top | bottom] <prostokątna-przestrzeń-barw> = srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65 <polarna-przestrzeń-barw> = hsl | hwb | lch | oklch <metoda-interpolacji-barw> = [ shorter | longer | increasing | decreasing ] hue <punkt-koloru> = <kolor> <długość-punktu-koloru>? <wskazówka-koloru> = <długość-procent> <długość-punktu-koloru> = <długość-procent>{1,2}
Funkcja repeating-linear-gradient()
Funkcja repeating-linear-gradient()
ma taką samą składnię, jak funkcja linear-gradient()
, ale różni się od niej jednym szczegółem pod względem sposobu działania. Funkcja repeating-linear-gradient()
powtarza gradient zdefiniowany między pierwszym i ostatnim punktem koloru tyle razy, ile razy zmieści się on w obszarze gradientu.
Jeśli punkty koloru nie mają określonej długości, to gradient zajmuje całą powierzchnię i wtedy między funkcjami linear-gradient()
i repeating-linear-gradient()
nie ma różnicy. Działanie funkcji repeating-linear-gradient()
staje się widoczne dopiero wtedy, gdy pierwszy i ostatni punkt koloru tworzą obszar o konkretnie określonej szerokości. Spójrz na poniższe przykłady:
Efekt działania tych dwóch funkcji będzie taki sam. A teraz spójrz na poniższe przykłady:
Ta funkcja ustawia trzy punkty koloru, między którymi tworzy krótkie, 10-pikselowe przejścia tonalne. Ostatni punkt koloru, zielony, rozciąga się jednolicie od 40 piksela do końca. Widać to na tym zrzucie ekranu:
A teraz zamienimy funkcję linear-gradient()
na repeating-linear-gradient()
, ustawienia punktów koloru pozostawiając niezmienione:
Efekt:
Różnica odległości między pierwszym i ostatnim punktem koloru wynosi 20 pikseli, dlatego funkcja repeating-linear-gradient()
powtarza 20-pikselowy fragment (w tym przypadku robi to 20 razy, ponieważ obszar gradientu ma szerokość 400 pikseli, a 400 : 20 = 20).
Podsumowanie
Zastosowanie | Funkcje CSS linear-gradient() i repeating-linear-gradient() mogą być używane wszędzie tam, gdzie można używać obrazów |
---|---|
Specyfikacja | CSS Images Module Level 4, funkcja CSS linear-gradient() |