CSS ﯼﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ

فهرست مطالب

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

:ﻥﺎﯾﺩﺍﺮﮔ ﯼﺎﻫ ﻪﻨﯿﻣﺯ ﺲﭘ

Gradient Backgrounds

.ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﺍﺭ ﺺﺨﺸﻣ ﮓﻧﺭ ﺪﻨﭼ ﺎﯾ ﻭﺩ ﻦﯿﺑ ﻑﺎﺻ ﻝﺎﻘﺘﻧﺍ ﺪﻨﻫﺩ ﯽﻣ ﻥﺎﮑﻣﺍ ﺎﻤﺷ ﻪﺑ CSS ﯼﺎﻫ

CSS ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﻥﺎﯾﺩﺍﺮﮔ ﻉﻮﻧ ﻪﺳ:

(ﺏﺭﻮﻣ/ﺖﺳﺍﺭ/ﭗﭼ/ﻻﺎﺑ/ﻦﯿﯾﺎﭘ) ﯽﻄﺧ ﯼﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ
(ﺎﻬﻧﺁ ﺰﮐﺮﻣ ﻂﺳﻮﺗ ﻩﺪﺷ ﻒﯾﺮﻌﺗ) ﯽﻋﺎﻌﺷ ﯼﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ
(ﯼﺰﮐﺮﻣ ﻪﻄﻘﻧ ﮏﯾ ﻝﻮﺣ ﺶﺧﺮﭼ) ﯽﻃﻭﺮﺨﻣ ﯼﺎﻫ ﺐﯿﺷ

CSS ﯽﻄﺧ ﯼﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ

ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺪﯾﺎﺑ ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ

ﻮﺤﻧ

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

(ﺖﺳﺍ ﺽﺮﻓ ﺶﯿﭘ ﻦﯾﺍ) ﻦﯿﯾﺎﭘ ﻪﺑ ﻻﺎﺑ ﺯﺍ - ﺖﻬﺟ

:ﺩﻮﺷ ﯽﻣ ﻞﯾﺪﺒﺗ ﺩﺭﺯ ﻪﺑ ﻭ ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﺰﻣﺮﻗ .ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﻻﺎﺑ ﺯﺍ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ

top to bottom (default)

ﻝﺎﺜﻣ

  #grad {
  background-image: linear-gradient(red, yellow);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>

ﺖﺳﺍﺭ ﻪﺑ ﭗﭼ ﺯﺍ - ﺖﻬﺟ

ﻪﺑ ﻝﺎﻘﺘﻧﺍ ﻝﺎﺣ ﺭﺩ ﻭ ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﺰﻣﺮﻗ .ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﭗﭼ ﺖﻤﺳ ﺯﺍ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﯽ

left to right

ﻝﺎﺜﻣ

  #grad {
  background-image: linear-gradient(to right, red , yellow);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

<div id="grad1"></div>

</body>
</html>

ﺏﺭﻮﻣ - ﺖﻬﺟ

.ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺏﺭﻮﻣ ﺕﺭﻮﺻ ﻪﺑ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ،ﯼﺩﻮﻤﻋ ﻭ ﯽﻘﻓﺍ ﻉﻭﺮﺷ ﺖﯿﻌﻗﻮﻣ ﻦﯿﯿﻌﺗ ﺎﺑ ﺪﯿﻧﺍﻮﺗ

:ﺩﻮﺷ ﯽﻣ ﻞﯾﺪﺒﺗ ﺩﺭﺯ ﻪﺑ ﻭ ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﺰﻣﺮﻗ .(ﺩﻭﺭ ﯽﻣ ﻦﯿﯾﺎﭘ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﺑ ﻭ) ﺩﻮﺷ ﯽﻣ ﻉ

top left to bottom right

ﻝﺎﺜﻣ

   #grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

<div id="grad1"></div>

</body>
</html>

ﺎﻫ ﻪﯾﻭﺍﺯ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

،ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻥﺎﯾﺩﺍﺮﮔ ﺖﻬﺟ ﯼﻭﺭ ﯼﺮﺘﺸﯿﺑ ﻝﺮﺘﻨﮐ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﺮﮔﺍ

ﻮﺤﻧ

background-image: linear-gradient(angle, color-stop1, color-stop2);

:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﯽﻄﺧ ﯼﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ ﯼﻭﺭ ﺮﺑ ﺍﺭ ﺎﻫ ﻪﯾﻭﺍﺯ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻩﻮﺤﻧ ﺮﯾﺯ ﻝﺎﺜﻣ

180deg

ﻝﺎﺜﻣ

  #grad {
  background-image: linear-gradient(180deg, red, yellow);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>

</body>
</html>

ﮓﻧﺭ ﻪﻧﺎﮔﺪﻨﭼ ﯼﺎﻫ ﻒﻗﻮﺗ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

ﺎﺑ (ﻦﯿﯾﺎﭘ ﻪﺑ ﻻﺎﺑ ﺯﺍ) ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

  #grad {
  background-image: linear-gradient(red, yellow, green);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow, green);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>

<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>

</body>
</html>

:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻦﺘﻣ ﯼﺭﺍﺪﻘﻣ ﻭ ﻥﺎﻤﮐ ﻦﯿﮕﻧﺭ ﮓﻧﺭ ﺎﺑ (ﺖﺳﺍﺭ ﻪﺑ ﭗﭼ ﺯﺍ) ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ

Rainbow Background

ﻝﺎﺜﻣ

   #grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>

</body>
</html>

ﺖﯿﻓﺎﻔﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

.ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﻩﺪﻨﻨﮐ ﻮﺤﻣ ﯼﺎﻫ ﻩﻮﻠﺟ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﺪﻧﺍﻮﺗ ﯽﻣ ﻪﮐ ﺪﻨﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﺖﯿﻓﺎﻔﺷ

.ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻫ ﮓﻧﺭ ﻒﻗﻮﺗ ﻒﯾﺮﻌﺗ ﯼﺍﺮﺑ()rgba ﻊﺑﺎﺗ ﺯﺍ ،ﺖﯿﻓﺎﻔﺷ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ

:ﺩﻮﺷ ﯽﻣ ﻞﯾﺪﺒﺗ ﻞﻣﺎﮐ ﺰﻣﺮﻗ ﮓﻧﺭ ﻪﺑ ﻭ ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﻑﺎﻔﺷ ﻼًﻣﺎﮐ .ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﭗﭼ ﺖﻤﺳ ﺯﺍ

ﻝﺎﺜﻣ

  #grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), 
rgba(255,0,0,1));
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

<div id="grad1"></div>

</body>
</html>

ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺭﺍﺮﮑﺗ

:ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯽﻄﺧ ﯼﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ ﺭﺍﺮﮑﺗ ﯼﺍﺮﺑ()repeating-linear-gradient ﻊﺑﺎﺗ

ﻝﺎﺜﻣ

:ﻩﺪﻧﻮﺷ ﺭﺍﺮﮑﺗ ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ

   #grad {
  background-image: 
repeating-linear-gradient(red, yellow 10%, green 20%);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}

#grad5 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>

<h1>Repeating Linear Gradient</h1>

<div id="grad1"></div>

<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>

<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>

<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>

<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>

</body>
</html>