CSS ﯼﺎﻫ ﮓﻧﺭ

فهرست مطالب

    نمایش فهرست مطالب

CSS ﺮﯾﺩﺎﻘﻣ ،ﮓﻧﺭ ﻡﺎﻧ +140 ﺯﺍ HEX، ﺮﯾﺩﺎﻘﻣ RGB، RGBA ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

RGBA ﯼﺎﻫ ﮓﻧﺭ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺕﺭﻭﺪﮐ ﻪﮐ - ﺪﻨﺘﺴﻫ ﺎﻔﻟﺁ ﻝﺎﻧﺎﮐ ﮏﯾ ﺎﺑ RGB ﮓﻧﺭ ﺮﯾﺩﺎﻘﻣ ﺵﺮﺘﺴﮔ RGBA ﮓﻧ

ﺖﺳﺍ 0.0 ﻦﯿﺑ ﯼﺩﺪﻋ ﺎﻔﻟﺁ ﺮﺘﻣﺍﺭﺎﭘ .ﺩﻮﺷ ﯽﻣ ﺺﺨﺸﻣ (ﺎﻔﻟﺁ ،ﯽﺑﺁ ،ﺰﺒﺳ ،ﺰﻣﺮﻗ) rgba :ﺎﺑ RGB

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

:ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ 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 */

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<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);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>

<h1>Define Colors With RGBA Values</h1>

<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>

</body>
</html>

HSL ﯼﺎﻫ ﮓﻧﺭ

HSL ﻒﻔﺨﻣ Hue، Saturation ﻭ Lightness ﺖﺳﺍ.

.ﺩﻮﺷ ﯽﻣ ﺺﺨﺸﻣ (ﯽﯾﺎﻨﺷﻭﺭ ،ﻉﺎﺒﺷﺍ ،ﮓﻧﺭ) hsl :ﺎﺑ HSL ﮓﻧﺭ ﺭﺍﺪﻘﻣ ﮏﯾ

  1. Hue (360 ﺎﺗ 0 ﺯﺍ) ﺖﺳﺍ ﮓﻧﺭ ﻪﺧﺮﭼ ﺭﺩ ﻪﺟﺭﺩ ﮏﯾ:

    • ﺖﺳﺍ ﺰﻣﺮﻗ (360 ﺎﯾ) 0

    • ﺖﺳﺍ ﺰﺒﺳ 120

    • ﺖﺳﺍ ﯽﺑﺁ 240

  2. .ﺖﺳﺍ ﻞﻣﺎﮐ ﮓﻧﺭ ٪100 :ﺖﺳﺍ ﺪﺻﺭﺩ ﺭﺍﺪﻘﻣ ﮏﯾ ﻉﺎﺒﺷﺍ

  3. .ﺖﺳﺍ ﺪﯿﻔﺳ %100 ﻭ (ﻩﺎﯿﺳ) ﻩﺮﯿﺗ %0 .ﺖﺳﺍ ﺪﺻﺭﺩ ﮏﯾ ﺰﯿﻧ ﯽﮑﺒﺳ

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

:ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ 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 */

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>

<h1>Define Colors With HSL Values</h1>

<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>

</body>
</html>

HSLA ﯼﺎﻫ ﮓﻧﺭ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺕﺭﻭﺪﮐ ﻪﮐ - ﺪﻨﺘﺴﻫ ﺎﻔﻟﺁ ﻝﺎﻧﺎﮐ ﮏﯾ ﺎﺑ HSL ﮓﻧﺭ ﺮﯾﺩﺎﻘﻣ ﺵﺮﺘﺴﮔ HSLA ﮓﻧ

ﻥﺁ ﺭﺩ ﻪﮐ ،ﺩﻮﺷ ﯽﻣ ﺺﺨﺸﻣ (ﺎﻔﻟﺁ ،ﯽﯾﺎﻨﺷﻭﺭ ،ﻉﺎﺒﺷﺍ ،ﮓﻧﺭ) hsla :ﺎﺑ HSLA ﮓﻧﺭ ﺭﺍﺪﻘﻣ ﮏﯾ

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

:ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ 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 */

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>

<h1>Define Colors With HSLA Values</h1>

<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>

</body>
</html>

ﺕﺭﻭﺪﮐ

ﯼﺍﺮﺑ ﺍﺭ ﺕﺭﻭﺪﮐ opacity

.ﺪﺷﺎﺑ (ﺕﺎﻣ ﻼًﻣﺎﮐ) 1.0 ﻭ (ﻑﺎﻔﺷ ﻼﻣﺎﮐ) 0.0 ﻦﯿﺑ ﯼﺩﺪﻋ ﺪﯾﺎﺑ

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﺰﯿﻧ ﻻﺎﺑ ﻦﺘﻣ ﻪﮐ ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻪﺟﻮﺗ

:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺕﺭﻭﺪﮐ ﺎﺑ ﺍﺭ ﻒﻠﺘﺨﻣ ﺮﺻﺎﻨﻋ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

#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 */

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);opacity:0.6;}
#p2 {background-color:rgb(0,255,0);opacity:0.6;}
#p3 {background-color:rgb(0,0,255);opacity:0.6;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}
</style>
</head>
<body>

<h1>Define Colors With Opacity</h1>

<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>

</body>
</html>