linear-gradient funksiyasi
linear-gradient funksiyasi chiziqli
gradientni belgilaydi. Fon rasmini belgilovchi
xususiyatlarga qo‘llaniladi: background,
background-image
yoki chegaraning rasmini: border-image,
background-image-source.
Sintaksis
selektor {
background: linear-gradient([burchak yoki yo‘nalish], rang1 o‘lcham1, rang2 o‘lcham2...);
}
Qiymatlar
| Qiymat | Tavsif |
|---|---|
| yo‘nalish |
Gradientning ma’lum yo‘nalishini har qanday burchak birliklarida
yoki kalit so‘zlar bilan belgilaydi: top, left, right, bottom
yoki ularning kombinatsiyasi: top left, top right va hokazo.
So‘zlar tartibi muhim emas: top left va left top yozish mumkin,
farqi yo‘q. Parametr ixtiyoriy: agar yozilmasa, gradient
yuqoridan pastga qarab boradi (to top kabi). Yo‘nalishdan oldin to so‘zi qo‘yiladi.
|
| burchak | Har qanday burchak birliklarida burchak. Musbat yoki manfiy bo‘lishi mumkin. Parametr ixtiyoriy. Bir vaqtning o‘zida burchak yoki yo‘nalish berilishi mumkin (yoki umuman hech narsa). |
| rang1 | Gradientning boshlang‘ich rangi har qanday rang birliklarida. |
| rang2 | Gradientning tugash rangi har qanday rang birliklarida. |
| o‘lcham | Gradientning ma’lum rangining cho‘zilishini belgilaydi har qanday o‘lcham birliklarida. |
Misol . Eng oddiy variant
Sintaksis:
selektor {
background: linear-gradient(boshlang‘ich rang, tugash rangi);
}
Keling, misolda ko‘ramiz:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Misol . Burchak qo‘shamiz
Sintaksis:
selektor {
background: linear-gradient(burchak, boshlang‘ich rang, tugash rangi);
}
Keling, misolda ko‘ramiz:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Misol . Yo‘nalish qo‘shamiz
Burchak o‘rniga top, left, right, bottom
yo‘nalishini yoki ularning kombinatsiyasini: top left, top right
qo‘shish mumkin. Yo‘nalishdan oldin to so‘zi qo‘yiladi.
Sintaksis:
selektor {
background: linear-gradient(yo‘nalish, boshlang‘ich rang, tugash rangi);
}
Keling, misolda ko‘ramiz:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Misol . Boshqa yo‘nalishni ko‘rsatamiz
Boshqa yo‘nalishni ko‘rsatamiz:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Misol . O‘lcham qo‘shamiz
Sintaksis:
selektor {
background: linear-gradient(rang1 o‘lcham1, rang2 o‘lcham2);
}
Quyidagi misolda xatti-harakat quyidagicha bo‘ladi:
sof qizil rang 0px dan
30px gacha, 30px dan 50px gacha
qizildan ko‘k ranggacha gradient, va
50px dan oxirigacha - sof ko‘k rang:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Misol . 2 tadan ortiq rang qo‘shamiz
Sintaksis:
selektor {
background: linear-gradient(rang1 o‘lcham1, rang2 o‘lcham2, rang3 o‘lcham3...);
}
Quyidagi misolda xatti-harakat quyidagicha bo‘ladi:
sof qizil rang 0px dan
30px gacha, 30px dan 50px gacha
qizildan ko‘k ranggacha gradient, va
50px dan 70px gacha - ko‘k rangdan yashil ranggacha gradient, va 70px dan keyin - sof yashil rang:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Misol . Keskin o‘tishlar
Quyidagi misolda xatti-harakat quyidagicha bo‘ladi:
sof qizil rang 0px dan
30px gacha, sof ko‘k rang - 30px dan
60px gacha, sof yashil rang - 60px dan keyin
(red 0px yozish shart emas):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Misol . O‘lchamlarni foizlarda ham berish mumkin
Quyidagi misolda xatti-harakat quyidagicha bo‘ladi:
sof qizil rang 0% dan
30% gacha, sof ko‘k rang - 30% dan
60% gacha, sof yashil rang - 60% dan keyin
(red 0% yozish shart emas):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Misol . Background-size bilan birgalikda ishlatish
Quyidagi misolda xatti-harakat quyidagicha bo‘ladi:
sof qizil rang 0px dan
30px gacha, sof ko‘k rang - 30px dan
60px gacha, shu bilan birga bularning hammasi
60px bo‘laklarida takrorlanadi
(background-size: 60px; tufayli):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Shuningdek qarang
-
radial-gradientfunksiyasi,
radiylı gradient yaratadi -
repeating-linear-gradientfunksiyasi,
takrorlanuvchi chiziqli gradient yaratadi -
repeating-radial-gradientfunksiyasi,
takrorlanuvchi radiylı gradient yaratadi
