Fonksiyon hsl() na CSS

Tunansa da amfani

CSS: hsl() Fonksiyon yana amfani da (HSL) (Hue-Saturation-Lightness) birni model don nufin birni. Yana iya haɗa alpha kwaye (wanda ke nufin rarraba birni).

Tuntuba:HSL na iya nufin (Hue), (Saturation) da (Lightness), wanda yana nufin yadda birni ke wuri na gurɗi.

Kware:hsla() Fonksiyon na: hsl() Anfiyon fonksiyon. Kware: hsl() Fonksiyon.

Shirin

Shirin 1

Arafin daidai da HSL(A) birni:

#p1 {background-color:hsl(120 100% 50%);} /* birni */
#p2 {background-color:hsl(120 100% 75%);} /* birni wanda ya haɗa ɗaukar kwaye */
#p3 {background-color:hsl(120 100% 25%);} /* birni wanda ya haɗa ɗaukar kwaye */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* birni wanda ya haɗa ɗaukar kwaye */
#p5 {background-color:hsl(120 60% 70%);} /* birni wanda ya haɗa ɗaukar kwaye */
#p6 {background-color:hsl(290 100% 50%);} /* birni */
#p7 {background-color:hsl(290 60% 70%);} /* birni wanda ya haɗa ɗaukar kwaye */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* daɗiɗiwar birni wanda ya haɗa ɗaukar kwaye */

#p6 {لون الخلفية:hsl(290, 60%, 70%);} /* لون أرجواني ناعم */

例子 2

مثال 2

استخدام جملة القيمة المطلقة بفواصل:
#p1 {لون الخلفية:hsl(120, 100%, 50%);} /* لون أخضر */
#p2 {لون الخلفية:hsl(120, 100%, 75%);} /* لون أخضر فاتح */
#p3 {لون الخلفية:hsl(120, 100%, 25%);} /* لون أخضر داكن */
#p4 {لون الخلفية:hsl(120, 60%, 70%);} /* لون أخضر ناعم */
#p5 {لون الخلفية:hsl(290, 100%, 50%);} /* لون أرجواني */

#p6 {لون الخلفية:hsl(290, 60%, 70%);} /* لون أرجواني ناعم */

تجربة شخصية

جملة CSS

جملة القيمة النسبيةhue saturation lightness / A)

جملة القيمة المطلقة

hsl(from color hue saturation lightness / A)

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الفنction لأول مرة.

الصفحات ذات الصلة

دروس:لون HSL لـ CSS

Hausa ka'idoji:CSS Colors

Hausa ka'idoji:فنction hwb() لـ CSS

Hausa ka'idoji:فنction lab() لـ CSS

Hausa ka'idoji:فنction lch() لـ CSS

Hausa ka'idoji:Hausa CSS oklab() hanyan

Hausa ka'idoji:Hausa CSS oklch() hanyan