radial-gradient funksiýasy
radial-gradient funksiýasy radial
gradient kesgitleýär. Bu funksiýa fon suratyny
kesgitläýän häsiýetlere: background,
background-image
ýa-da çäginiň suratyna: border-image,
background-image-source.
Sintaksis
selektor {
background: radial-gradient([görnüş tip ýerleşiş], reňk1 ölçegi1, reňk2 ölçegi2...);
}
Görnüşleri
| Görnüş | Düşündiriş |
|---|---|
| görnüş |
Gabul edilýän görnüşler:
ellipse elliptik gradient (deslapky ýagdaýda),
circle tegelek gradient.
|
| tip |
Gradientiň giňelişini kesgitleýär.
Gabul edilýän görnüşler:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| ýerleşiş |
Açar söz at-dan soň
top, bottom,
left, right, center
açar sözleri ýa-da haýsydyr bir ölçeg birlikleri
ýardymy bilen ýerleşiş görkezilýär.
|
| reňk1 | Gradientiň başlangyç reňki, haýsydyr bir reňk birliklerinde. |
| reňk2 | Gradientiň gutaryş reňki, haýsydyr bir reňk birliklerinde. |
| ölçeg | Gradientiň belli bir reňkiniň uzynlygyny haýsydyr bir ölçeg birliklerinde kesgitleýär. |
Tip üçin görnüşler
| Görnüş | Düşündiriş |
|---|---|
closest-side |
Gradientiň görnüşi blok bilen iň ýakyn tarapyna gabat gelýär. |
closest-corner |
Gradientiň görnüşi iň ýakyn burç bilen bolan aralyk baradaky maglumat esasynda hasaplanylýar. |
farthest-side |
Gradient uzak tarapa çenli ýaýraýar. |
farthest-corner |
Gradientiň görnüşi iň uzak burç bilen bolan aralyk baradaky maglumat esasynda hasaplanylýar. |
Bellik
Tip bilen görnüşi ýerlerini çalşyp bolýar, ýöne ýerleşiş biriniň parametriniň soňunda bolmaly. Gradientiň tipi we onuň ölçegi biri-biri bilen işlemeýär (mantykly, sebäbi olar ýaraglaşýar). Ösýän ölçegdir.
Mysal . Iň ýönekeý wariant
Geliň diňe başlangyç we gutaryş reňkini kesgitläýäris:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Mysal . Ýerleşiş goşalyň
Merkeziň ýerleşişini kesgitläýäris:
30px - çep tarapdan, 100px - ýokardan:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Mysal . Prosentde ýerleşiş
Merkeziň ýerleşişini prosentde kesgitläýäris:
30% - çep tarapdan, 50% - ýokardan:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Mysal . Açar söz bilen ýerleşiş
Açar sözler
top, bottom, left,
right, center dürli
bilelikde ulanylyp bilner. Mysal üçin, gradienti
sagda merkezde goýýarys:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Mysal . Gradientiň ölçegi
Bu ýagdaýda gradient şeýle işleýär:
0px-dan 20px çenli arassa
gyzyl reňk, 20px-dan 60px çenli - gradient
gyzyl reňkden gök reňke, 60px-dan soň - arassa
gök reňk:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Mysal . Birnäçe reňk bir hatarda
Bu ýagdaýda gradient şeýle işleýär:
0px-dan 20px çenli arassa
gyzyl reňk, 20px-dan 40px çenli
arassa gök reňk, 40px-dan
60px çenli - gradient gök reňkden ýaşyl reňke,
60px-dan soň - arassa ýaşyl reňk:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Mysal . Ölçeg + ýerleşiş
Durmuşda dürli reňkler üçin ölçegleri we gradientiň merkeziniň ýerleşişini kesgitläýäris:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Mysal . Gradientiň görnüşi
Gradientiň görnüşi birinji parametr bilen
kesgitlenýär we 2 görnüşi kabul edip bilýär: circle
(tegelek gradient) ýa-da ellipse (elliptik
gradient, deslapky ýagdaýda). Näme üçin biz
elliptik gradientleri görmänok, eger-de
ol deslapky ýagdaýda kesgitlenýän bolsa? Sebäbi, şu wagt
çäp bloklary kwadrat görnüşli boldu. Eger biz
görnüşini düzbucakly eden bolsak, onda elliptik
gradienti göreris:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Mysal . Tegelek gradient
Geliň düzbucakly blokda tegelek gradient döredeliň.
Bunun üçin birinji parametr bilen
gradientiň görnüşini açar söz
circle bilen kesgitläýäris:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Mysal . Ýerleşiş goşalyň
Geliň öňki koda gradientiň ýerleşişini-de goşalyň:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Mysal . farthest-corner tipi + circle
Gradientiň görnüşi blok bilen iň uzak burç bilen bolan aralyk baradaky maglumat esasynda hasaplanylýar:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mysal . farthest-corner tipi + ellipse
Gradientiň görnüşi blok bilen iň uzak burç bilen bolan aralyk baradaky maglumat esasynda hasaplanylýar:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mysal . farthest-side tipi + circle
Gradient uzak tarapa çenli ýaýraýar:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mysal . farthest-side tipi + ellipse
Gradient uzak tarapa çenli ýaýraýar:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mysal . closest-corner tipi + circle
Gradientiň görnüşi blok bilen iň ýakyn burç bilen bolan aralyk baradaky maglumat esasynda hasaplanylýar:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mysal . closest-corner tipi + ellipse
Gradientiň görnüşi blok bilen iň ýakyn burç bilen bolan aralyk baradaky maglumat esasynda hasaplanylýar:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mysal . closest-side tipi + circle
Gradientiň görnüşi blok bilen iň ýakyn tarapyna gabat gelýär:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Mysal . closest-side tipi + ellipse
Gradientiň görnüşi blok bilen iň ýakyn tarapyna gabat gelýär:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Hem-de serediň
-
linear-gradientfunksiýasyny,
ýönekeý gradient döredýän -
repeating-linear-gradientfunksiýasyny,
gaýtalanýan ýönekeý gradient döredýän -
repeating-radial-gradientfunksiýasyny,
gaýtalanýan radial gradient döredýän
