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