جلسه 32 ام آموزش CSS : رنگ دهی – بخش دوم

در این جلسه قصد داریم ، شما را با مباحث پیشرفته تری از رنگدهی آشنا کنیم . در جلسات گذشته شما را با روش های رنگدهی زیر آشنا کردیم :

Hex code
Short hex code
Rgb
استفاده از نام رنگ

حالا در این جلسه ، شما را با مباحث زیر آشنا می کنیم :

rgba
hsl
hsla
opacity

rgba ، مخفف عبارت red green blue alpha می باشد . در این روش رنگدهی شما مقدار رنگ های قرمز ، سبز ، آبی و مقدار آلفا را مشخص می کنید . برای مقادیر رنگی باید عددی بین 0 تا 255 را وارد کرد و برای مقدار آلفا باید عددی بین صفر تا 1 را انتخاب کرد . در مثال زیر نمونه ای از استفاده از این ساختار رنگی را می بینید .

#d1 {background-color: rgba(255, 0, 0, 0.5);} 
#d2 {background-color: rgba(0, 255, 0, 0.5);}  
#d3 {background-color: rgba(0, 0, 255, 0.5);}

hsl ، مخفف عبارت hue saturation lightness می باشد . برای hue باید مقداری از صفر تا 360 و برای دو مقدار دیگر باید عددی بین صفر تا 100 درصد را وارد کرد . در ادامه نمونه ای از رنگدهی به این روش را مشاهده می کنید .

#g1 {background-color: hsl(120, 100%, 50%);}  
#g2 {background-color: hsl(120, 100%, 75%);}  
#g3 {background-color: hsl(120, 100%, 25%);}

hsla ، مخفف عبارت hue saturation lightness alpha است . مقدار آلفا هر چه به صفر نزدیک تر شود ، تصویر شفاف تر ( کم رنگ تر ) می شود . در ادامه نمونه استفاده از این روش رنگدهی را مشاهده می کنید .

#g1 {background-color: hsla(120, 100%, 50%, 0.3);}  
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}  
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}

Opacity ، ویژگی ای است که برای تنظیم شفافیت تصاویر به کار می رود . هر چه این مقدار به صفر نزدیک شود ، تصویر شفاف تر و هر چه به یک نزدیک شود ، تصویر کدر تر می شود . به مثال زیر توجه کنید .

#g1 {background-color:rgb(255,0,0);opacity:0.6;}  
#g2 {background-color:rgb(0,255,0);opacity:0.6;}  
#g3 {background-color:rgb(0,0,255);opacity:0.6;}

در ادامه برای هر یک از موارد بالا مثالی کاربردی می آوریم .

مثال 1 ) روش رنگدهی rgba

<html>
   <head>
      <style>
         #p1 {background-color:rgba(255,0,0,0.3);}
         #p2 {background-color:rgba(0,255,0,0.3);}
         #p3 {background-color:rgba(0,0,255,0.3);}
      </style>
   </head>
   <body>
      <p>RGBA colors:</p>
      <p id="p1">Red</p>
      <p id="p2">Green</p>
      <p id="p3">Blue</p>
   </body>
</html>

حالا نتیجه را ببینید .

مثال 2 ) روش رنگدهی hsl

<html>
   <head>
      <style>
         #g1 {background-color:hsl(120, 100%, 50%);}
         #g2 {background-color:hsl(120,100%,75%);}
         #g3 {background-color:hsl(120,100%,25%);}
      </style>
   </head>
   <body>
      <p>HSL colors:</p>
      <p id="g1">Green</p>
      <p id="g2">Normal Green</p>
      <p id="g3">Dark Green</p>
   </body>
</html>

نتیجه را مشاهده کنید .

مثال 3 ) روش رنگدهی hsla

<html>
   <head>
      <style>
         #d1 {background-color:hsla(120,100%,50%,0.3);}
         #d2 {background-color:hsla(120,100%,75%,0.3);}
         #d3 {background-color:hsla(120,100%,25%,0.3);}
      </style>
   </head>
   <body>
      <p>HSLA colors:</p>
      <p id="d1">Less opacity green</p>
      <p id="d2">Green</p>
      <p id="d3">Green</p>
   </body>
</html>

نتیجه را ببینید .

مثال 4 ) تنظیم opacity

<html>
   <head>
      <style>
         #m1 {background-color:rgb(255,0,0);opacity:0.6;} 
         #m2 {background-color:rgb(0,255,0);opacity:0.6;} 
         #m3 {background-color:rgb(0,0,255);opacity:0.6;}
      </style>
   </head>
   <body>
      <p>HSLA colors:</p>
      <p id="m1">Red</p>
      <p id="m2">Green</p>
      <p id="m3">Blue</p>
   </body>
</html>

نتیجه را مشاهده کنید .

خب دوستان عزیز ، این جلسه هم به پایان رسید. موفق و پیروز باشید .

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

جلسه 32 ام آموزش CSS : رنگ دهی – بخش دوم

آیا نیاز به مدرک هم دارید؟