Fan: web dasturlashga kirish Bajardi: Bakiev Xursandbek Mamatsaloevich Tekshirdi

Svg belgilar bilan currentColor kalit so'zidan foydalanish
Yaxshi kalit so'zni ishlatish stsenariysi currentColor SVG-belgilar rangini boshqarish kerak bo'lgan holatlar bilan ifodalanadi. Tasavvur qilaylik, bizda bir belgi bor, undan keyin matn keladi. Belgilar belgisi va matn bir xil rangda bo'yalgan bo'lishi kerak.

Icon va matn bir xil rangda bo'lishi kerak

Kalit so'z currentColorSVG atributini sozlash uchun ishlatilishi mumkin fillva keyin kerakli rangni ota-ona elementiga belgilashimiz mumkin. Quyidagi HTML kodini qarang:

Show more

Bu erda ishlatiladigan uslub:

.link {
color: #3766dc;
}

Ushbu yondashuv bilan belgi ota-ona elementiga tayinlangan rangga bo'yalgan bo'ladi.

Bundan tashqari, xuddi shu yondashuv to'rtburchaklar shaffof joylarga biriktirilgan piktogramma yaratish uchun ishlatilishi mumkin, ularning sifati fillham yordam bilan o'rnatiladi currentColor. Bu colorquyidagi vazifalarni hal qilish uchun CSS xususiyatidan foydalanishga imkon beradi:

1. 
   Belgi uchun rangning maqsadi.
   
2. 
   To'rtburchakning asl rangi yarim rangli versiyasini tayinlash.
   

Quyidagi rasmga qarang.

Rangli yarim shaffof to'rtburchakda joylashgan belgilarni sozlash

Bu erda tegishli CSS kodi:
.icon {
color: hsl(var(--primary-h), 50%, var(--primary-l));
}

.icon-2 {

--primary-h: 26;
}

.icon-3 {

--primary-h: 292;
}

Elementga atribut berilganligiga e'tibor opacitybering . Turli xil variantlarda belgilar faqat rang to’niga mos keladigan qiymatni o'zgartiradi. Ushbu yondashuv dizayn tizimlarida juda foydali bo'lishi mumkin, chunki u murakkab tuzilmalarga murojaat qilmasdan, turli xil belgilarni yaratish va ranglarini ramka elementlarining rangi bilan moslashtirish imkonini beradi.

~ ~