Функция 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;
}
:
Мисол . Turi farthest-corner + circle
Градиент шакли блокнинг узоқ бурчига бўлган масофа асосида ҳисобланади:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Мисол . Turi farthest-corner + ellipse
Градиент шакли блокнинг узоқ бурчига бўлган масофа асосида ҳисобланади:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Мисол . Turi farthest-side + circle
Градиент блокнинг узоқ томонигача чўзилади:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Мисол . Turi farthest-side + ellipse
Градиент блокнинг узоқ томонигача чўзилади:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Мисол . Turi closest-corner + circle
Градиент шакли блокнинг энг яқин бурчига бўлган масофа асосида ҳисобланади:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Мисол . Turi closest-corner + ellipse
Градиент шакли блокнинг энг яқин бурчига бўлган масофа асосида ҳисобланади:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Мисол . Turi closest-side + circle
Градиент шакли блокнинг ўзига энг яқин томони билан мос келади:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Мисол . Turi 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функцияси,
у такрорланувчи радиал градиент яратади
