Funkcja radial-gradient
Funkcja radial-gradient ustawia gradient
promienisty. Ta funkcja jest stosowana 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: radial-gradient([kształt typ pozycja], kolor1 rozmiar1, kolor2 rozmiar2...);
}
Wartości
| Wartość | Opis |
|---|---|
| kształt |
Dopuszczalne wartości:
ellipse gradient eliptyczny (domyślnie),
circle gradient kołowy.
|
| typ |
Określa rozciągnięcie gradientu.
Dopuszczalne wartości:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| pozycja |
Po słowie kluczowym at
określa się pozycję w dowolnych jednostkach długości
lub za pomocą słów kluczowych top, bottom,
left, right, center
w różnych kombinacjach.
|
| kolor1 | Kolor początkowy gradientu w dowolnych jednostkach koloru. |
| kolor2 | Kolor końcowy gradientu w dowolnych jednostkach koloru. |
| rozmiar | Określa rozciągłość danego koloru gradientu w dowolnych jednostkach długości. |
Wartości dla typu
| Wartość | Opis |
|---|---|
closest-side |
Kształt gradientu pokrywa się z najbliższym mu bokiem bloku. |
closest-corner |
Kształt gradientu jest obliczany na podstawie odległości do najbliższego rogu bloku. |
farthest-side |
Gradient rozciąga się do najdalszego boku bloku. |
farthest-corner |
Kształt gradientu jest obliczany na podstawie odległości do najdalszego rogu bloku. |
Uwaga
Typ i kształt można zamieniać miejscami, natomiast pozycja musi znajdować się na końcu pierwszego parametru. Typ gradientu i jego rozmiar nie współpracują ze sobą (logiczne, ponieważ są w konflikcie). Wygrywa rozmiar.
Przykład . Najprostsza wersja
Po prostu ustawmy kolor początkowy i końcowy:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Przykład . Dodajmy pozycję
Ustawmy położenie środka:
30px - odstęp od lewej, 100px - odstęp od góry:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Przykład . Pozycja w procentach
Ustawmy położenie środka w procentach:
30% - odstęp od lewej, 50% - odstęp od góry:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Przykład . Pozycja słowem kluczowym
Można użyć słów kluczowych
top, bottom, left,
right, center w różnych
kombinacjach. Ustawmy na przykład gradient
po prawej stronie na środku:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Przykład . Rozmiar gradientu
W tym przypadku gradient będzie działał następująco:
od 0px do 20px będzie czysty
czerwony kolor, od 20px do 60px - gradient
od czerwonego do niebieskiego, po 60px - czysty
niebieski:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Przykład . Kilka kolorów po kolei
W tym przypadku gradient będzie działał następująco:
od 0px do 20px będzie czysty
czerwony kolor, od 20px do 40px
bedzie czysty niebieski kolor, od 40px
do 60px - gradient od niebieskiego do zielonego,
po 60px - czysty zielony:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Przykład . Rozmiar + pozycja
Ustawmy jednocześnie rozmiary dla różnych kolorów i pozycję środka gradientu:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Przykład . Kształt gradientu
Kształt gradientu jest określany pierwszym parametrem
i może przyjmować 2 wartości: circle
(gradient kołowy) lub ellipse (gradient
eliptyczny, domyślnie). Dlaczego więc do tej pory
nie widzieliśmy gradientów eliptycznych, skoro
są one domyślne? Ponieważ do tej pory
kształt bloków był kwadratowy. Jeśli zmienimy
kształt na prostokątny, zobaczymy gradient eliptyczny:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Przykład . Okrągły gradient
Zróbmy okrągły gradient w prostokątnym
bloku. W tym celu ustawmy pierwszym parametrem
kształt gradientu za pomocą słowa kluczowego
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Przykład . Dodajmy pozycję
Dodajmy do poprzedniego kodu jeszcze pozycję gradientu:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Przykład . Typ farthest-corner + circle
Kształt gradientu jest obliczany na podstawie odległości do najdalszego rogu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Przykład . Typ farthest-corner + ellipse
Kształt gradientu jest obliczany na podstawie odległości do najdalszego rogu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Przykład . Typ farthest-side + circle
Gradient rozciąga się do najdalszego boku bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Przykład . Typ farthest-side + ellipse
Gradient rozciąga się do najdalszego boku bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Przykład . Typ closest-corner + circle
Kształt gradientu jest obliczany na podstawie odległości do najbliższego rogu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Przykład . Typ closest-corner + ellipse
Kształt gradientu jest obliczany na podstawie odległości do najbliższego rogu bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Przykład . Typ closest-side + circle
Kształt gradientu pokrywa się z najbliższym mu bokiem bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Przykład . Typ closest-side + ellipse
Kształt gradientu pokrywa się z najbliższym mu bokiem bloku:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Zobacz też
-
funkcję
linear-gradient,
która tworzy gradient liniowy -
funkcję
repeating-linear-gradient,
która tworzy powtarzający się gradient liniowy -
funkcję
repeating-radial-gradient,
która tworzy powtarzający się gradient promienisty
