repeating-linear-gradient funksiýasy
repeating-linear-gradient funksiýasy
gaýtalanýan çyzyksy gradient kesgitleýär. Bu
şu manyny berýär: biz gradientiň kesgitli bir nusgasyny kesgitleýäris,
meselem, 0px-dan 10px-a çenli - gyzyl reňkten
gök reňke gradient we bu gradient
bütin blokda gaýtalanar: 0px-dan 10px-a,
10px-dan 20px-a, 20px-dan
30px-a we şuňuň ýaly.
Bu funksiýa fon suratyny kesgitleýän
aýratynlyklara degişlidir: background,
background-image
ýa-da çäginiň suratyna: border-image,
background-image-source.
Sintaksis
sahypalaýjy {
background: repeating-linear-gradient([ugur], reňk1 ölçeg1, reňk2 ölçeg2...);
}
Görnüşleri
| Görnüş | Düşündiriş |
|---|---|
| ugur |
Käbir burç ölçeg birliklerinde
ýa-da açary sözler bilen
top, left, right, bottom
gradientiň ugruny kesgitleýär.
Sözleriň tertibi ähmiýetsiz. Görnüş hökmany däl:
eger ýazylmasa, gradient ýokardan aşaga tarap gider.
Ugurundan öň to sözi goýulýar.
|
| burç | Käbir burç ölçeg birliklerinde burç. Positive ýa-da negative bolup biler. Görnüş hökmany däl. Bir wagtyň özünde burç ýa-da ugur kesgitlenip biliner (ýa-da hiç zat hem däl). |
| reňk1 | Gradientiň başlangyç reňgi, käbir reňk ölçeg birliklerinde. |
| reňk2 | Gradientiň gutaryş reňgi, käbir reňk ölçeg birliklerinde. |
| ölçeg | Gradientiň käbir reňkiniň uzynlygyny käbir ölçeg birliklerinde kesgitleýär. |
Mysal . Iň ýönekeý görnüşi
Gradient şuňa meňzer: 0px-dan
20px-a çenli arassa gyzyl reňk, 20px-dan
40px-a çenli - gyzyl reňkten göke gradient.
We şuňa meňzeş ýokardan aşaga gaýtalanar (şonuň üçin
ol gaýtalanýan gradient):
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(red 20px, blue 40px);
width: 400px;
height: 200px;
}
:
Mysal . Anyk reňkler
Gradient şuňa meňzer: 0px-dan
20px-a çenli arassa gyzyl reňk, 20px-dan
40px-a çenli - arassa gök reňk (mysalyň aýratynlygy şonda,
ikinji reňk birinji reňk gutaran ýerde
başlaýar). We şuňa meňzeş ýokardan aşaga gaýtalanar:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
width: 400px;
height: 200px;
}
:
Mysal . Ugryny çalyşdyryň
Häzir gradientiň ugry sagdan çepe tarap bolar:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
width: 400px;
height: 200px;
}
:
Mysal . Graduslarda ugur
Ugur hökmünde graduslarda burç kesgitleýäris:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
width: 400px;
height: 200px;
}
:
Mysal . Negative baha
Ugryny negative baha edeliň:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
width: 400px;
height: 200px;
}
:
Şeýle hem göz aňyň
-
repeating-radial-gradientfunksiýasy,
gaýtalanýan radial gradient döredýär -
linear-gradientfunksiýasy,
çyzyksy gradient döredýär -
radial-gradientfunksiýasy,
radial gradient döredýär