آموزش گرادینت(gradient) مخروطی در CSS

یک گرادینت مخروطی(conic)، یک گرادینت است که چند انتقال رنگی(color transitions) دارد که به دور یک نقطه ی مرکزی چرخیده اند. برای ایجاد یک گرادینت مخروطی، باید حداقل دو رنگ را تعریف کنیم.

شیوه ی نوشتاری یا سینتکس

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

به طور پیش فرض، زاویه 0deg است و موقعیت(position) center است. اگر درجه مشخص نشده باشد، رنگ ها به طور مساوی به دور نقطه ی مرکزی، پخش می شوند.

گرادینت مخروطی با سه رنگ

در مثال زیر، یک گرادینت مخروطی با سه رنگ نشان داده شده است:

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

گرادینت مخروطی با پنج رنگ

در مثال زیر، یک گرادینت مخروطی با پنج رنگ نشان داده شده است:

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

 گرادینت مخروطی، با سه رنگ و درجه

در مثال زیر، یک گرادینت مخروطی با سه رنگ و یک درجه برای هر رنگ نشان داده شده است:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

ایجاد نمودارهای دایره ای

برای ایجاد یک نمودار دایره ای از گرادینت مخروطی، فقط کافیست دستور border-radius: 50% را اضافه کنید:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

 آنچه در زیر می بینید، یک نمودار دایره ای است که برای تمام رنگ های آن، درجه تعریف شده است:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}

گرادینت مخروطی با مشخص کردن زاویه ی from

زاویه ی from، زاویه ای است که تمام گرادینت مخروطی به وسیله ی آن می چرخد. در مثال زیر، یک گرادینت مخروطی وجود دارد که از یک زاویه ی from نود(90) درجه استفاده می کند:

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
}

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

با استفاده از [at position] می توانیم مرکز یک گرادینت مخروطی را مشخص کنیم. مثال زیر، یک گرادینت مخروطی را نشان می دهد که موقعیت مرکز آن 45% 60% می باشد:

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
}

تکرار کردن یک گرادینت مخروطی

از تابع repeating-conic-gradient() برای تکرار کردن گرادنیت های مخروطی استفاده می شود:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}

در زیر، یک گرادینت مخروطی تکرار شونده وجود دارد که برای آن color-starts و color-stops مشخص شده است:

<

#grad {
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}

تابع های گرادینت در CSS