linear-gradient funksiýasy
linear-gradient funksiýasy çyzyk
gradienti kesgitleýär. Fon suratyny kesgitleýän häsiýetlere goýulýar:
background,
background-image
ýa-da araçäge suratyny kesgitleýän häsiýetlere: border-image,
background-image-source.
Sintaksis
selektor {
background: linear-gradient([burç ýa-da ugur], reňk1 ölçeg1, reňk2 ölçeg2...);
}
Görnüşleri
| Görnüşi | Düşündiriş |
|---|---|
| ugur |
Gradientiň kesgitli ugruny islendik burç birliklerinde
ýa-da açar sözler bilen kesgitleýär: top, left, right, bottom
ýa-da olaryň birikmeleri: top left, top right we ş.m.
Sözleriň tertibi aýratyn däl: top left ýazylyşy we left top ýazylyşy,
parsyz. Bu parametr hökmany däl: eger ýazylmasa, gradient
ýokardan aşak barar (to top ýaly). Ugryň öňünde to sözi goýulýar.
|
| burç | Islendik burç birliklerinde burç. Positive ýa-da negative bolup bilýär. Parametr hökmany däl. Bir wagtyň özünde ýa burç, ýa-da ugur (ýa-da hiç zatam) kesgitlenip biliner. |
| reňk1 | Gradientiň başlangyç reňki islendik reňk birliklerinde. |
| reňk2 | Gradientiň soňky reňki islendik reňk birliklerinde. |
| ölçeg | Gradientiň kesgitli reňkiniň uzynlygyny islendik ölçeg birliklerinde kesgitleýär. |
Mysal . Iň ýönekeý wariant
Sintaksis:
selektor {
background: linear-gradient(başlangyç reňk, soňky reňk);
}
Mysala seredeliň:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Mysal . Burç goşýarys
Sintaksis:
selektor {
background: linear-gradient(burç, başlangyç reňk, soňky reňk);
}
Mysala seredeliň:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Mysal . Ugur goşýarys
Burç ýerine ugur goşup bolýar
top, left, right, bottom
ýa-da olaryň birikmeleri: top left, top right
Ugryň öňünde to sözi goýulýar.
Sintaksis:
selektor {
background: linear-gradient(ugur, başlangyç reňk, soňky reňk);
}
Mysala seredeliň:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Mysal . Başga ugur görkezýäris
Başga ugry görkezeliň:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Mysal . Ölçeg goşýarys
Sintaksis:
selektor {
background: linear-gradient(reňk1 ölçeg1, reňk2 ölçeg2);
}
Indiki mysalda ýagdaý şeýle bolar:
ary gyzyl reňk 0px-dan
30px-a çenli, 30px-dan 50px-a çenli
gyzyldan gök reňke gradient, we
50px-dan ahyryna çenli - ary gök:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Mysal . 2-den köp reňk goşýarys
Sintaksis:
selektor {
background: linear-gradient(reňk1 ölçeg1, reňk2 ölçeg2, reňk3 ölçeg3...);
}
Indiki mysalda ýagdaý şeýle bolar:
ary gyzyl reňk 0px-dan
30px-a çenli, 30px-dan 50px-a çenli
gyzyldan gök reňke gradient, we
50px-dan 70px-a çenli - gökden
ýaşyl reňke gradient, we 70px-dan soň - ary ýaşyl:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Mysal . Keskin geçişler
Indiki mysalda ýagdaý şeýle bolar:
ary gyzyl reňk 0px-dan
30px-a çenli, ary gök - 30px-dan
60px-a çenli, ary ýaşyl - 60px-dan soň
(red 0px ýazmak hökmany däl):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Mysal . Ölçegleri göterimlerde hem kesgitläp bolýar
Indiki mysalda ýagdaý şeýle bolar:
ary gyzyl reňk 0%-dan
30%-a çenli, ary gök - 30%-dan
60%-a çenli, ary ýaşyl - 60%-dan soň
(red 0% ýazmak hökmany däl):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Mysal . background-size bilen birikme
Indiki mysalda ýagdaý şeýle bolar:
ary gyzyl reňk 0px-dan
30px-a çenli, ary gök - 30px-dan
60px-a çenli, şol bir wagtyň özünde bu hemmesi
60px bölejiklerde gaýtalanyp durar
(background-size:
60px; sebäpli):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Şeýle hem serediň
-
radial-gradientfunksiýasyny,
ýörite radius gradient döredýän -
repeating-linear-gradientfunksiýasyny,
ýörite gaýtalanylýan çyzyk gradient döredýän -
repeating-radial-gradientfunksiýasyny,
ýörite gaýtalanylýan radius gradient döredýän
