Функција 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,
која креира понављајући радијални градијент
