رنگ ها در CSS3

saber

4 سال پیش

امتیاز دهید post

رنگ ها در CSS3

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش رنگ ها در CSS3 خواهیم پرداخت.

CSS3 از ویژگی های اضافی رنگ به شرح زیر پشتیبانی کرده است –

رنگ های RGBA
رنگ های HSL
رنگ های HSLA
تیرگی

RGBA مخفف Red Green Blue Alpha است. این الحاق CSS2 است، آلفا میزان تیرگی رنگ را مشخص می کند و عدد پارامتر عددی بین 0.0 تا 1.0 است. یک نحو نمونه 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);}

#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 درجه ای از چرخ رنگ است، اشباع و لایت بودن مقادیر درصد بین 0 تا 100٪ است. یک نحو نمونه HSL همانطور که در زیر نشان داده شده است –

# g1 {background-color: hsl (120، 100٪، 50٪)؛}
# g2 {background-color: hsl (120، 100٪، 75٪)؛}
# g3 {background-color: hsl (120، 100٪، 25٪)؛}

# 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 است. مقدار آلفا میزان کدری را مشخص می کند که RGBA نشان داده شده است. یک نحو نمونه HSLA همانطور که در زیر نشان داده شده است –

# 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)؛}

# 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؛}

# 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؛}

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

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #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);}
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;RGBA colors:&lt;/p&gt;
      &lt;p id = "p1"&gt;Red&lt;/p&gt;
      &lt;p id = "p2"&gt;Green&lt;/p&gt;
      &lt;p id = "p3"&gt;Blue&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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 = "p2">Green</p>

</body>

</html>

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

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #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);}
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;RGBA colors:&lt;/p&gt;
      &lt;p id = "p1"&gt;Red&lt;/p&gt;
      &lt;p id = "p2"&gt;Green&lt;/p&gt;
      &lt;p id = "p3"&gt;Blue&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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 = "p2">Green</p>

</body>

</html>

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

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

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #g1 {background-color:hsl(120, 100%, 50%);}
         #g2 {background-color:hsl(120,100%,75%);}
         #g3 {background-color:hsl(120,100%,25%);}
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;HSL colors:&lt;/p&gt;
      &lt;p id = "g1"&gt;Green&lt;/p&gt;
      &lt;p id = "g2"&gt;Normal Green&lt;/p&gt;
      &lt;p id = "g3"&gt;Dark Green&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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&gt;
   &lt;head&gt;
      &lt;style&gt;
         #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;}
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;HSLA colors:&lt;/p&gt;
      &lt;p id = "m1"&gt;Red&lt;/p&gt;
      &lt;p id = "m2"&gt;Green&lt;/p&gt;
      &lt;p id = "m3"&gt;Blue&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

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 = "m2">Green</p>

</body>

</html>

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

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

رنگ ها در CSS3

رنگ ها در CSS3

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

دیدگاه شما

بدون دیدگاه

رنگ ها در CSS3

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه