Функсияи 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,
ки градиенти такроришавандаи радиоӣ эҷод мекунад
