Funkcja linear-gradient
Funkcja linear-gradient ustawia liniowy
gradient. Stosuje się do właściwości, które
ustawiają obraz tła: background,
background-image
lub obraz obramowania: border-image,
background-image-source.
Składnia
selektor {
background: linear-gradient([kąt lub kierunek], kolor1 rozmiar1, kolor2 rozmiar2...);
}
Wartości
| Wartość | Opis |
|---|---|
| kierunek |
Określa konkretny kierunek gradientu w dowolnych jednostkach kąta
albo za pomocą słów kluczowych top, left, right, bottom
lub ich kombinacji: top left, top right i tak dalej.
Kolejność słów nie ma znaczenia: można pisać top left i left top,
różnicy nie ma. Parametr opcjonalny: jeśli nie zostanie podany, gradient będzie
biegł od góry do dołu (jak przy to top). Przed kierunkiem stawia się słowo to.
|
| kąt | Kąt w dowolnych jednostkach kąta. Może być dodatni lub ujemny. Parametr opcjonalny. Jednocześnie może być podany albo kąt, albo kierunek (albo nic). |
| kolor1 | Kolor początkowy gradientu w dowolnych jednostkach koloru. |
| kolor2 | Kolor końcowy gradientu w dowolnych jednostkach koloru. |
| rozmiar | Określa rozciągłość konkretnego koloru gradientu w dowolnych jednostkach rozmiaru. |
Przykład . Najprostsza wersja
Składnia:
selektor {
background: linear-gradient(kolor początkowy, kolor końcowy);
}
Spójrzmy na przykładzie:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Przykład . Dodajemy kąt
Składnia:
selektor {
background: linear-gradient(kąt, kolor początkowy, kolor końcowy);
}
Spójrzmy na przykładzie:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Przykład . Dodajemy kierunek
Zamiast kąta można dodać kierunek
top, left, right, bottom
lub ich kombinację: top left, top right
Przed kierunkiem stawia się słowo to.
Składnia:
selektor {
background: linear-gradient(kierunek, kolor początkowy, kolor końcowy);
}
Spójrzmy na przykładzie:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Przykład . Dodajemy kierunek
Wskażmy inny kierunek:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Przykład . Dodajemy rozmiar
Składnia:
selektor {
background: linear-gradient(kolor1 rozmiar1, kolor2 rozmiar2);
}
W następnym przykładzie zachowanie będzie następujące:
czysty czerwony kolor będzie od 0px do
30px, od 30px do 50px
będzie gradient od czerwonego do niebieskiego, a
od 50px i do końca - czysty niebieski:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Przykład . Dodajemy więcej niż 2 kolorów
Składnia:
selektor {
background: linear-gradient(kolor1 rozmiar1, kolor2 rozmiar2, kolor3 rozmiar3...);
}
W następnym przykładzie zachowanie będzie następujące:
czysty czerwony kolor będzie od 0px do
30px, od 30px do 50px
będzie gradient od czerwonego do niebieskiego, a
od 50px i do 70px - gradient od niebieskiego
do zielonego, a po 70px - czysty zielony:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Przykład . Ostre przejścia
W następnym przykładzie zachowanie będzie następujące:
czysty czerwony kolor będzie od 0px do
30px, czysty niebieski - od 30px
do 60px, czysty zielony - po 60px
(red 0px można nie pisać):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Przykład . Rozmiary można podawać też w procentach
W następnym przykładzie zachowanie będzie następujące:
czysty czerwony kolor będzie od 0% do
30%, czysty niebieski - od 30%
do 60%, czysty zielony - po 60%
(red 0% można nie pisać):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Przykład . Połączenie z background-size
W następnym przykładzie zachowanie będzie następujące:
czysty czerwony kolor będzie od 0px do
30px, czysty niebieski - od 30px
do 60px, przy tym wszystko to będzie powtarzać się
kawałkami po 60px (z powodu background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Zobacz też
-
funkcję
radial-gradient,
która tworzy gradient promienisty -
funkcję
repeating-linear-gradient,
która tworzy powtarzający się gradient liniowy -
funkcję
repeating-radial-gradient,
która tworzy powtarzający się gradient promienisty
