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

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 */

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.