linear-gradient funksiyasi
linear-gradient funksiyasi xetti
gradienti teyin edir. Arxa plan sekli teyin eden
xasselere tetbiq edilir: background,
background-image
ve ya serhed sekli: border-image,
background-image-source.
Sintaksis
selektor {
background: linear-gradient([bucaq ve ya istiqamet], reng1 olcu1, reng2 olcu2...);
}
Deyerler
| Deyer | Tesvir |
|---|---|
| istiqamet |
Gradientin mueyyen istiqametini istənilən bucaq vahidlerinde
ve ya açar sozlerle top, left, right, bottom
ve ya onlarin birlesmesi ile teyin edir: top left, top right ve s.
Sozlerin sırası vacib deyil: top left ve left top yazmaq olar,
ferqi yoxdur. Parametr isteye baglıdır: yazılmasa, gradient
yuxarıdan asagıya gedəcək (to top kimi). Istiqametten evvel to sozu yazılır.
|
| bucaq | Istənilən bucaq vahidlerinde bucaq. Müsbət ve ya menfi ola biler. Parametr isteye baglıdır. Eyni zamanda ya bucaq, ya istiqamet (ve ya hec biri) teyin edile biler. |
| reng1 | Gradientin baslangıc rengi istənilən reng vahidlerinde. |
| reng2 | Gradientin son rengi istənilən reng vahidlerinde. |
| olcu | Gradientin muəyyən renginin uzunluğunu istənilən olcu vahidlerinde teyin edir. |
Nümunə . En sadə variant
Sintaksis:
selektor {
background: linear-gradient(baslangıc reng, son reng);
}
Nümunəyə baxaq:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Nümunə . Bucaq elave edirik
Sintaksis:
selektor {
background: linear-gradient(bucaq, baslangıc reng, son reng);
}
Nümunəyə baxaq:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Nümunə . Istiqamet elave edirik
Bucaq yerine istiqamet elave etmek olar
top, left, right, bottom
ve ya onlarin birlesmesi: top left, top right
Istiqametten evvel to sozu yazılır.
Sintaksis:
selektor {
background: linear-gradient(istiqamet, baslangıc reng, son reng);
}
Nümunəyə baxaq:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Nümunə . Istiqamet elave edirik
Basqa istiqamet teyin edək:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Nümunə . Olcu elave edirik
Sintaksis:
selektor {
background: linear-gradient(reng1 olcu1, reng2 olcu2);
}
Asagıdakı nümunəde davranış asagıdakı kimi olacaq:
təmiz qırmızı reng 0px-dən
30px-dək, 30px-dən 50px-dək
qırmızıdan maviyə gradient, ve
50px-dən sonra - təmiz mavi:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Nümunə . 2-den çox reng elave edirik
Sintaksis:
selektor {
background: linear-gradient(reng1 olcu1, reng2 olcu2, reng3 olcu3...);
}
Asagıdakı nümunəde davranış asagıdakı kimi olacaq:
təmiz qırmızı reng 0px-dən
30px-dək, 30px-dən 50px-dək
qırmızıdan maviyə gradient,
50px-dən 70px-dək - maviden
yaşıla gradient, ve 70px-dən sonra - təmiz yaşıl:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Nümunə . Keskin keçidler
Asagıdakı nümunəde davranış asagıdakı kimi olacaq:
təmiz qırmızı reng 0px-dən
30px-dək, təmiz mavi - 30px-dən
60px-dək, təmiz yaşıl - 60px-dən sonra
(red 0px yazılmasa da olar):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Nümunə . Olculeri faizle de teyin etmek olar
Asagıdakı nümunəde davranış asagıdakı kimi olacaq:
təmiz qırmızı reng 0%-dən
30%-dək, təmiz mavi - 30%-dən
60%-dək, təmiz yaşıl - 60%-dən sonra
(red 0% yazılmasa da olar):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Nümunə . Background-size ile birlesme
Asagıdakı nümunəde davranış asagıdakı kimi olacaq:
təmiz qırmızı reng 0px-dən
30px-dək, təmiz mavi - 30px-dən
60px-dək, bununla yanaşı bu butunluqde
60px hisseciklerle tekrarlanacaq
(background-size: 60px; sebebinden):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Həmçinin bax
-
radial-gradientfunksiyası,
ki, radial gradient yaradır -
repeating-linear-gradientfunksiyası,
ki, tekrarlanan xetti gradient yaradır -
repeating-radial-gradientfunksiyası,
ki, tekrarlanan radial gradient yaradır
