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