4 oy oldin

Gradientlar: qo'llash usullari, ko'nikma va natija

Gradientlar bu sizning CSS dagi qo’shimcha imkoniyatlaringizdan biridir. Gradientlar orqali ranglarni birlashtirib uni orqa fonga, matnga, chegara chizig'iga va boshqalarga ishlatishingiz mumkin.

Veb-dizaynda eng ko’p ishlatiladigan  gradient turi bu linear-gradient hisoblanadi. Chunki bu usul bilan ranglarni chapdan o’ngga, tepadan pastga yoki bir yo’nalishdagi ranglarni har-xil burchaklarda berishingiz mumkin. Bu maqolada siz gradientlarni ishlatish bo'yicha ko'nikmaga ega bo'lasiz.

Qanday qilib orqa fonga gradient berishingiz mumkin? Orqa fonga gradient berish uchun siz CSS da background kodidan foydalanasiz. 

Orqa fonga gradient berish.

Bu usul orqali siz orqa fonga gradient berishingiz mumkin lekin uni yanada o'zingizga moslashtirish uchun quidagi usullardan foydalansangiz bo'ladi.

Orqa fonga chapdan o'ngga gradient berish. 

Orqa fonga o'ngdan chapga gradient berish. 

Orqa fonga tepadan pastga gradient berish. 

Bu usullardan tashqari uni ma'lum bir darajada qo'llash imkoniga ham egasiz. Misol uchun 45 darajada uni ishlatib ko'ramiz

Orqa fonga 45 darajada gradient berish. 

Agar siz darajani o'zgartirmoqchi bo'lsangiz unda 45deg ni o'rniga boshqa qiymatni kirgazishingiz kifoya.

Hozirgacha biz gradientni 2 xil ranglarni qo'shish orqali hosil qilib keldik. Lekin aslida siz istalgancha ranglarni gradientda ishlatishingiz mumkin. Quida biz 4 ta rangni ishlatish orqali gradient hosil qilamiz.  

4 xil rang orqali gradient hosil qilish.

Yuqoridagi kabi siz ham istalgancha ranglarni qo'shish orqali gradientlar hosil qilishingiz mumkin.

Qanday qilib matnga gradient berish mumkin? Buning uchun  quidagi kodlardan foydalanamiz.

Matnga gradient berish.

Bu holatdagi gradientni ham o'zingizga moslashtirib olishingiz uchun, ya'ni gradientni chapdan o'ngga, ma'lum bir darajada yoki boshqa usullardan foydalanishingiz uchun to bottom kodini o'zgartirib qo'ysangiz kifoya. 

Qanday qilib chegara chizig'iga gradient berish mumkin? Chegar chizig'iga gradient berishning 2 xil usuli bor. 

Chegara chizig'iga gradient berishning birinchi usuli.

Birinchi usul juda oddiy lekin ba'zi hollarda sizga muammo tug'dirishi mumkin. Chunki bu usuldan foydalanganingizda sizda border-radius qiymatini berishning imkoni bo'lmaydi. 

Chegara chizig'iga gradient berishning ikkinchi usuli. 

Aslida CSSda gradientli chegara chizig'iga border-radius berishning imkoni yo'q, lekin siz yuqoridagi usuldan foydalanib border-radius qiymatini ham qo'sha olasiz.

Gradientlar so'nggi yillarda trendga aylanganini hisobga oladigan bo'lsak, veb saytingizda yuqoridagilardan to'g'ri foydalanish orqali dizayningizni yangi pog'onaga olib chgiqishingiz mumkin 

Yangi maqolalarni birinchilardan bo'lib o'qish uchun telegram kanalimizga a'zo bo'ling!