اعمال طیف رنگی به عناصر در CSS

با استفاده از دستور Gradient می توان بک گراندی متشکل از دو یا چند طیف رنگ را برای عناصر ایجاد نمود. این خاصیت را به دو شکل می توان مقدار دهی نمود.

Linear gradient

برای ایجاد طیف رنگی خطی می توان از linear-gradient استفاده نمود. در ساده ترین حالت استفاده می توان رنگ های مورد نظر را به شکل زیر اعمال نمود.

background: linear-gradient(red, yellow);

مثال: کادری با عرض 800 و ارتفاع 200 پیکسل ایجاد کرده و بک گراند آن را طیفی از قرمز و مشکی تعیین نمایید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      #box {
        width: 800px;
        height: 200px;
        background: linear-gradient(red, black);
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

در صورتی که جهت اعمال طیف را مشخص نکنید، طیف رنگی بصورت عمودی (بالا به پایین) اعمال می شود بدین ترتیب که از رنگ اول شروع شده و به رنگ آخر ختم می شود. در صورتی که قصد داشته باشید در جهت خاصی اعمال گردد می توانید جهت مورد نظر را به عنوان پارامتر اول مشخص کنید که می تواند یکی از مقادیر زیر باشد:

  • to right: از چپ به راست.
  • to left: از راست به چپ.
  • to bottom: از بالا به پایین.
  • to top: از پایین به بالا.
background: linear-gradient(to right, red, black);

در صورتیکه قصد داشته باشید طیف رنگی بصورت اوریب اعمال شود می توانید از دستوراتی مانند زیر استفاده کنید.

background: linear-gradient(to right  bottom, red, black);
background: linear-gradient(to right  top, red, black);

حالت دیگر تعیین جهت، استفاده از درجه به عنوان زاویه اعمال طیف رنگی می باشد که می بایست با واحد deg ذکر شود. مقدار درجه می تواند منفی یا مثبت باشد.

background: linear-gradient(45deg, red, black);

Radial gradient

از این دستور برای ایجاد طیف رنگی بصورت دایره ای استفاده می شود با این تفاوت که نمی توان زاویه اعمال را مشخص نمود.

background: radial-gradient(white, red, black);