Функцыя radial-gradient
Функцыя radial-gradient задае радыяльны
градыент. Даная функцыя ўжываецца да ўласцівасцей, якія
задаюць выяву фону: background,
background-image
ці выяву мяжы: border-image,
background-image-source.
Сінтаксіс
селектар {
background: radial-gradient([форма тып пазіцыя], колер1 памер1, колер2 памер2...);
}
Значэнні
| Значэнне | Апісанне |
|---|---|
| форма |
Прымаемыя значэнні:
ellipse эліптычны градыент (па змаўчанні),
circle кругавы градыент.
|
| тып |
Задае расцяжэнне градыента.
Прымаемыя значэнні:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| пазіцыя |
Пасля ключавога слова at
ўказваецца пазіцыя ў любых адзінках вымярэння для памеру
ці з дапамогай ключавых слоў top, bottom,
left, right, center
ў розных камбінацыях.
|
| колер1 | Пачатковы колер градыента ў любых адзінках вымярэння для колеру. |
| колер2 | Канчатковы колер градыента ў любых адзінках вымярэння для колеру. |
| памер | Задае працягласць пэўнага колеру градыента ў любых адзінках вымярэння для памеру. |
Значэнні для тыпу
| Значэнне | Апісанне |
|---|---|
closest-side |
Форма градыента супадае з бліжэйшай да яго старонкай блока. |
closest-corner |
Форма градыента вылічваецца на падставе інфармацыі пра адлегласць да бліжэйшага кута блока. |
farthest-side |
Градыент распаўсюджваецца да дальняй старонкі блока. |
farthest-corner |
Форма градыента вылічваецца на падставе інфармацыі пра адлегласць да дальняга кута блока. |
Заўвага
Тып і форму можна мяняць месцамі, а вось пазіцыя павінна ісці ў канцы першага параметра. Тып градыента і яго памер не працуюць адзін з адным (лагічна, яны ж канфліктуюць). Перамагае памер.
Прыклад . Самы просты варыянт
Давайце проста задамо пачатковы і канчатковы колер:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Прыклад . Дадамо пазіцыю
Давайце задамо становішча цэнтра:
30px - водступ злева, 100px - водступ зверху:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Прыклад . Пазіцыя ў працэнтах
Давайце задамо становішча цэнтра ў працэнтах:
30% - водступ злева, 50% - водступ зверху:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Прыклад . Пазіцыя ключавым словам
Можна выкарыстоўваць ключавыя словы
top, bottom, left,
right, center у розных
камбінацыях. Паставім, напрыклад, градыент
справа па цэнтры:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Прыклад . Памер градыента
У дадзеным выпадку градыент будзе працаваць так:
ад 0px да 20px будзе чысты
чырвоны колер, ад 20px да 60px - градыент
ад чырвонага да блакітнага, пасля 60px - чысты
блакітны:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Прыклад . Некалькі колераў запар
У дадзеным выпадку градыент будзе працаваць так:
ад 0px да 20px будзе чысты
чырвоны колер, ад 20px да 40px
будзе чысты блакітны колер, ад 40px
да 60px - градыент ад блакітнага да зялёнага,
пасля 60px - чысты зялёны:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Прыклад . Памер + пазіцыя
Давайце адначасова задамо памеры для розных колераў і пазіцыю цэнтра градыента:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Прыклад . Форма градыента
Форма градыента задаецца першым параметрам
і можа прымаць 2 значэнні: circle
(кругавы градыент) ці ellipse (эліптычны
градыент, па змаўчанні). Чаму ж да гэтага
мы не бачылі эліптычных градыентаў, хоць
ён задаецца па змаўчанні? Таму што да гэтага
форма блокаў была квадратная. Калі мы зменім
форму на прамавугольную, то ўбачым эліптычны
градыент:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Прыклад . Кругавы градыент
Давайце зробім кругавы градыент у прамавугольным
блоке. Для гэтага задамо першым параметрам
форму градыента з дапамогай ключавога слова
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Прыклад . Дадамо пазіцыю
Давайце да папярэдняга кода дадамо яшчэ і пазіцыю градыента:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Прыклад . Тып farthest-corner + circle
Форма градыента вылічваецца на падставе інфармацыі пра адлегласць да дальняга кута блока:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Прыклад . Тып farthest-corner + ellipse
Форма градыента вылічваецца на падставе інфармацыі пра адлегласць да дальняга кута блока:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Прыклад . Тып farthest-side + circle
Градыент распаўсюджваецца да дальняй старонкі блока:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Прыклад . Тып farthest-side + ellipse
Градыент распаўсюджваецца да дальняй старонкі блока:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Прыклад . Тып closest-corner + circle
Форма градыента вылічваецца на падставе інфармацыі пра адлегласць да бліжэйшага кута блока:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Прыклад . Тып closest-corner + ellipse
Форма градыента вылічваецца на падставе інфармацыі пра адлегласць да бліжэйшага кута блока:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Прыклад . Тып closest-side + circle
Форма градыента супадае з бліжэйшай да яго старонкай блока:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Прыклад . Тып closest-side + ellipse
Форма градыента супадае з бліжэйшай да яго старонкай блока:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Глядзіце таксама
-
функцыю
linear-gradient,
якая стварае лінейны градыент -
функцыю
repeating-linear-gradient,
якая стварае паўтаральны лінейны градыент -
функцыю
repeating-radial-gradient,
якая стварае паўтаральны радыяльны градыент
