آموزش طراحی سایت-رنگ و گرادينت در CSS3

سلام دوستان...با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشیدآموزش رنگها در CSS3در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند .اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :رنگ های RGBA (red, blue, green و alpha)رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)درجه ی شفافیت و کدری Opacityرنگ های RGBA شامل (red, blue, green و alpha) https://www.aparat.com/v/obOFy رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید .مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 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 و Lightness می باشد .یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :0 (یا 360) کاملاً قرمز است120 سبز محسوب می شود240 آبی محسوب می شود/li>مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آنمفهوم Lightness نیز یک درصد است : %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 هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند .مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 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 (درجه ی تیرگی و شفافیت)خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند .مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است .مثال زیر مقادیر 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 */آموزش گرادینت در css https://www.aparat.com/v/XBdTq در 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 (کاملاً کدر) .مثال زیر رنگ های 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) مقدار دهی و مشخص می شود .مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :0 (یا 360) کاملاً قرمز است120 سبز محسوب می شود240 آبی محسوب می شود/li>مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آنمفهوم Lightness نیز یک درصد است : %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 هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند .مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 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 https://www.aparat.com/v/4gGj2 خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند .مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است .مثال زیر مقادیر 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 */ آموزش طراحی سایت ادامه دارد