٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش رنگ های CSS

CSS از 140+ نام رنگ ، مقادیر HEX ، مقادیر RGB ، مقادیر RGBA ، مقادیر HSL ، مقادیر HSLA و تیرگی پشتیبانی می کند. رنگهای RGBA مقادیر رنگ RGBA یک پسوند مقادیر رنگ RGB با یک کانال آلفا است – که…

محمد یوسفی

13 جولای 2021

CSS از 140+ نام رنگ ، مقادیر HEX ، مقادیر RGB ، مقادیر RGBA ، مقادیر HSL ، مقادیر HSLA و تیرگی پشتیبانی می کند.


رنگهای RGBA

مقادیر رنگ RGBA یک پسوند مقادیر رنگ RGB با یک کانال آلفا است – که میزان تیرگی یک رنگ را مشخص می کند.

مقدار رنگ RGBA با این موارد مشخص می شود: rgba (قرمز ، سبز ، آبی ، آلفا). پارامتر آلفا عددی بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً مات) است.

مثال زیر رنگهای مختلف RGBA را تعریف می کند:

مثال

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

رنگ های HSL

HSL مخفف Hue، Saturation and Lightness است.

مقدار رنگ HSL با: hsl (رنگ ، اشباع ، سبک بودن) مشخص شده است.

  1. Hue درجه ای بر روی چرخ رنگ است (از 0 تا 360):
    • 0 (یا 360) قرمز است
    • 120 سبز است
    • 240 آبی است
  2. اشباع یک مقدار درصد است: 100٪ تمام رنگ است.
  3. سبکی نیز یک درصد است. 0٪ تیره (سیاه) و 100٪ سفید است.

مثال زیر رنگهای مختلف HSL را تعریف می کند:

مثال

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

رنگ های HSLA

مقادیر رنگی HSLA یک پسوند مقادیر رنگی HSL با یک کانال آلفا است – که میزان تیرگی یک رنگ را مشخص می کند.

مقدار رنگ HSLA با این مورد مشخص می شود: hsla (رنگ ، اشباع ، سبک بودن ، آلفا) ، جایی که پارامتر آلفا میزان کدورت را تعریف می کند. پارامتر آلفا عددی بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً مات) است.

مثال زیر رنگهای مختلف HSLA را تعریف می کند:

مثال

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

تیرگی

opacityویژگی CSS میزان تیرگی کل عنصر را تعیین می کند (هم رنگ پس زمینه و هم متن کدر / شفاف خواهد بود).

opacityارزش ملک باید یک عدد بین 0.0 (به طور کامل شفاف) و 1.0 (به طور کامل مات) باشد.

توجه داشته باشید که متن بالا نیز شفاف / مات خواهد بود!

مثال زیر عناصر مختلف را با تیرگی نشان می دهد:

مثال

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها