آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Shadow (سایه) در css

دوره های مرتبط با این مقاله

CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند .
اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

  • رنگ های RGBA (red, blue, green و alpha)
  • رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)
  • رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)
  • Opacity (درجه ی شفافیت و کدری)

رنگ های RGBA (red, blue, green و alpha)

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید .
مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

رنگ ها در css

مثال زیر رنگ های 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 و Lightness می باشد .
یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .
1. HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

  • 0 (یا 360) کاملاً قرمز است
  • 120 سبز محسوب می شود
  • 240 آبی محسوب می شود/li>

2. Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن
3. Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

رنگ ها در css

مثال زیر رنگ های مختلف 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 هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند .
مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

رنگ ها در css

نمونه ی زیر رنگ های 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 (درجه ی تیرگی و شفافیت)

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند .
مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

رنگ ها در css

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است .
مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

  
                    #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 */
                
  • 2228
  •    882
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .