CSS gradientlar
CSS gradientlari
CSS gradient funksiyalari element ichida ikki yoki undan ortiq rang orasida silliq o‘tishlarni ko‘rsatish imkonini beradi.
CSS uch turdagi gradientni belgilaydi:
- Chiziqli gradientlar — rang o‘tishi pastga, yuqoriga, chapga, o‘ngga yoki diagonal yo‘nalishda bo‘ladi
- Radial gradientlar — rang o‘tishi markaziy nuqtadan tashqariga yo‘naladi
- Konik gradientlar — rang o‘tishi markaziy nuqta atrofida aylanadi
CSS gradient funksiyalari background-image xossasi ichida ishlatiladi.
CSS linear-gradient() funksiyasi
CSS linear-gradient() funksiyasi chiziqli gradient yaratadi.
Chiziqli gradient to‘g‘ri chiziq yo‘nalishida boradigan rang o‘tishini belgilaydi: pastga, yuqoriga, chapga, o‘ngga yoki diagonal.
Chiziqli gradient kamida ikkita rang to‘xtashini (color stop) talab qiladi. Rang to‘xtashlari — silliq o‘tishlarni amalga oshirishni xohlagan ranglaringiz. Gradient effekti bilan birga boshlanish nuqtasi va yo‘nalishni (yoki burchakni) ham belgilash mumkin.
Sintaksis
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Yo‘nalish — yuqoridan pastga (bu standart)
Quyidagi misol yuqoridan pastga yo‘naladigan chiziqli gradientni ko‘rsatadi. U qizildan boshlanadi va sariqqa o‘tadi:
Yo‘nalish — pastdan yuqoriga
Quyidagi misol pastdan yuqoriga yo‘naladigan chiziqli gradientni ko‘rsatadi. U qizildan boshlanadi va sariqqa o‘tadi:
Yo‘nalish — chapdan o‘ngga
Quyidagi misol chapdan o‘ngga yo‘naladigan chiziqli gradientni ko‘rsatadi. U qizildan boshlanadi va sariqqa o‘tadi:
Yo‘nalish — diagonal bo‘yicha
Quyidagi misol chap-yuqoridan o‘ng-pastga yo‘naladigan chiziqli gradientni ko‘rsatadi. U qizildan boshlanadi va sariqqa o‘tadi:
Misol
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
O‘zingiz sinab ko‘ring »
Chiziqli gradient — burchaklardan foydalanish
Agar gradient yo‘nalishini ko‘proq nazorat qilmoqchi bo‘lsangiz, oldindan belgilangan yo‘nalishlar (to bottom, to top, to right, to left, to bottom right va h.k.) o‘rniga burchak ( angle ) parametrini belgilashingiz mumkin.
- 0deg qiymati "yuqoriga" ga teng.
- 90deg qiymati "o‘ngga" ga teng.
- 180deg qiymati "pastgacha" ga teng.
- 270deg qiymati "chapga"ga teng
Sintaksis
background-image: linear-gradient(angle, color-stop1, color-stop2);
Quyidagi misol chiziqli gradientlarda burchaklardan foydalanishni ko‘rsatadi:
Chiziqli gradient — bir nechta rang to‘xtashlari
Quyidagi misol bir nechta rang to‘xtashli chiziqli gradientni (yuqoridan pastga) ko‘rsatadi:
Quyidagi misol kamalak ranglari va ba’zi matn bilan chiziqli gradientni (chapdan o‘ngga) ko‘rsatadi:
Misol
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
O‘zingiz sinab ko‘ring »
Chiziqli gradient — shaffoflik
CSS gradientlar shaffoflikni ham qo‘llab-quvvatlaydi — undan so‘nib qolish (fading) effektlarini yaratish uchun foydalanish mumkin.
Shaffoflik qo‘shish uchun rang to‘xtashlarini belgilashda rgba() funksiyasidan foydalanamiz. rgba() funksiyasidagi oxirgi parametr 0 dan 1 gacha qiymat bo‘lishi mumkin va rangning shaffofligini belgilaydi: 0 — to‘liq shaffoflik, 1 — to‘liq rang (shaffofliksiz).
Quyidagi misol chapdan o‘ngga yo‘naladigan chiziqli gradientni ko‘rsatadi. U to‘liq shaffofdan boshlanadi va to‘liq qizil rangga o‘tadi:
Misol
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
O‘zingiz sinab ko‘ring »
CSS repeating-linear-gradient() funksiyasi
CSS repeating-linear-gradient() funksiyasi chiziqli gradientlarni takrorlash uchun ishlatiladi:
Misol
Takrorlanuvchi chiziqli gradient:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!