Fan: web dasturlashga kirish Bajardi: Bakiev Xursandbek Mamatsaloevich Tekshirdi

HSl formatida berilgan ranglar

Kamdan — kam hollarda HSL (Hue, Saturation, Lightness-to’n, to'yinganlik, yorug'lik) rang modelidan foydalanishni ko'rmoqdamiz, ammo yaqinda bu rang modeli dizaynerlar va ishlab chiquvchilarning e'tiborini jalb qila boshladi.

Rangli doira

Rang g'ildiragida har bir rang rang rangini (hue) tasvirlaydigan ma'lum bir burchakka mos keladi. HSl rangini tavsiflash uchun, to’ndan tashqari, rangning to'yinganligi va yengilligiga javob beradigan qiymatlarni belgilashimiz kerak.

Rangli to’nni tanlash
To'yinganlik va yorug'likni tanlash uchun biz bu erda joylashgan qulay vositadan foydalanishimiz mumkin. Masalan, to’nni tanlagandan so'ng, rangning to'yinganligi va yorug'ligi quyida ko'rsatilganidek ifodalanishi mumkin.

To'yinganlik va yorug'likni tanlash
To'yinganlik miqdori, boshida, kulrang va oxirida — rang doirasida tanlagan rang bilan ifodalanadi. Yorug'lik miqdori qora rang bilan boshlanadi, tanlangan rang to’niga etadi va oq bilan tugaydi.
Ushbu moslashuvchanlik juda foydali bo'lishi mumkin. Misol uchun, biz rang tonini tanlashimiz va ehtiyojlarimizga mos ravishda to'yinganlik va yorug'likni sozlashimiz mumkin. Ushbu yondashuv bizga dinamik va ishlatish uchun qulay rang sxemalarini yaratishga imkon beradi.
Joriy rangli kalit so'z
Kalit so'z currentColorCSS xususiyatlarini saqlaydi color. Bu ularning ota-elementlaridan ranglarni meros qilib olmaydigan elementlarni sozlash uchun ishlatilishi mumkin. Bu erda ba'zi bir xususiyatlar mavjud, ularning qiymatlari teng ravishda o'rnatiladicurrentColor:

• 
  border-color
  
• 
  text-decoration-color
  
• 
  outline-color
  
• 
  box-shadow
  

Bu erda currentColorCSS o'zgaruvchisi kabi bir tuyg'u paydo bo'lishi mumkin. Biroq, bu kalit so'z CSS-da o'zgaruvchilar bilan ishlashdan oldin paydo bo'ldi. Quyidagi misolni ko'rib chiqaylik:
.element {
color: #222;
border: 2px solid;
}

border-color xususiyatining qiymati ,shubhabiz- color xususiyatining qiymati bilan bir xil Buning sababi, asl qiymati border-color joriy rang qiymati currentColor.
.element {
color: #222;
border: 2px solid currentColor;
}

Qizig'i shundaki,currentColorbu kalit so'z ota-ona elementi darajasida va bolalar elementlari uchun ishlatilishi mumkin.