رنگ ها در CSS3 

3 سال پیش

رنگ ها در CSS3 

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش رنگ ها در CSS3 خواهیم پرداخت.
CSS3 از ویژگی های اضافی رنگ به شرح زیر پشتیبانی کرده است –
  • رنگ های RGBA
  • رنگ های HSL
  • رنگ های HSLA
  • تیرگی
RGBA مخفف Red Green Blue Alpha است. این الحاق CSS2 است، آلفا میزان تیرگی رنگ را مشخص می کند و عدد پارامتر عددی بین ۰٫۰ تا ۱٫۰ است. یک نحو نمونه RGBA همانطور که در زیر نشان داده شده است –
#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، اشباع، لایت بودن است. در اینجا Huge درجه ای از چرخ رنگ است، اشباع و لایت بودن مقادیر درصد بین ۰ تا ۱۰۰٪ است. یک نحو نمونه HSL همانطور که در زیر نشان داده شده است –
# g1 {background-color: hsl (120، ۱۰۰٪، ۵۰٪)؛}
# g2 {background-color: hsl (120، ۱۰۰٪، ۷۵٪)؛}
# g3 {background-color: hsl (120، ۱۰۰٪، ۲۵٪)؛}

 

HSLA مخفف hue ، saturation ، lightness و alpha است. مقدار آلفا میزان کدری را مشخص می کند که RGBA نشان داده شده است. یک نحو نمونه HSLA همانطور که در زیر نشان داده شده است –
# g1 {background-color: hsla (120، ۱۰۰٪، ۵۰٪، ۰٫۳)؛}
# g2 {background-color: hsla (120، ۱۰۰٪، ۷۵٪، ۰٫۳)؛}
# g3 {background-color: hsla (120، ۱۰۰٪، ۲۵٪، ۰٫۳)؛}

 

opacity یک رنگ نازک تر است که برای افزایش تیرگی به رنگ سیاه نیاز دارد. یک نحو نمونه کدری مانند زیر نشان داده شده است –
# g1 {background-color: rgb (255،۰،۰)؛ opacity: 0.6؛}
# g2 {background-color: rgb (0،۲۵۵،۰)؛ opacity: 0.6؛}
# g3 {background-color: rgb (0،۰،۲۵۵)؛ opacity: 0.6؛}

 

مثال زیر ویژگی rgba color را نشان می دهد.
<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>

 

مثال زیر ویژگی rgba color را نشان می دهد.

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

 

خروجی به صورت زیر می باشد


 

مثال زیر ویژگی  رنگ 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>

 

خروجی به صورت زیر می باشد

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>

 

خروجی به صورت زیر می باشد


 

منبع.

لیست جلسات قبل آموزش CSS

  1. آموزش CSS
  2. CSS چیست؟
  3. آموزش نحو CSS
  4. آموزش قوانین CSS 
  5. آموزش واحد انداره گیری در CSS
  6. آموزش رنگ ها در CSS
  7. آموزش Background در CSS
  8. آموزش فونت ها در CSS
  9. آموزش استفاده از تصاویر در CSS 
  10. آموزش استفاده از تصاویر در CSS 
  11. آموزش استفاده از لینک ها در CSS 
  12. آموزش جداول در CSS 
  13. آموزش حاشیه در CSS 
  14. آموزش margin در CSS
  15. آموزش لیست ها در CSS
  16. آمورش ویژگی padding در CSS
  17. آموزش ویژگی مکان نما در CSS 
  18. آموزش outline در CSS 
  19. آموزش ابعاد در CSS 
  20. آموزش نوارهای پیمایشی در CSS
  21. آموزش visibility در CSS
  22.  آموزش موقعیت یابی در  CSS 
  23. آموزش لایه ها در CSS 
  24. آموزش شبه کلاس ها در CSS 
  25. آموزش شبه عناصر در CSS
  26.  آموزش قوانین @ در CSS 
  27. آموزش فیلترهای متنی و تصویری در CSS 
  28. آموزش انواع رسانه ها در CSS 
  29. آموزش مدیا صفحه در CSS
  30. آموزش رسانه شنیداری در CSS
  31. آموزش چاپ در CSS 
  32. آموزش طرح بندی در CSS 
  33. آموزش CSS3
  34. آموزش گرد کردن گوشه ها در CSS3 
  35. آموزش حاشیه تصویر CSS3 
  36. آموزش تنظیم چند پس زمینه در CSS3  
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه