CSS — گرادیان مخروطی (Conic Gradients)

آخرین بروزرسانی: 1404/07/16

قبلی: گرادیان شعاعی (Radial Gradients) بعدی: افکت های سایه (Shadow Effects)

گرادیان مخروطی CSS (Conic Gradients)

«گرادیان مخروطی CSS» یا conic-gradient() گذار رنگ را پیرامون یک نقطه مرکزی می چرخاند. برای ساخت آن دست کم دو رنگ لازم است و سپس می توانید زاویه شروع، مرکز و درجه هر رنگ را نیز تعیین کنید.

تابع conic-gradient() در گرادیان مخروطی CSS

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

/* Syntax */
selector { background-image: conic-gradient([from <angle>] [at <position>], <color> [<degree>], ...); }

نکته: برای مرجع کامل نحو، مستندات conic-gradient() را ببینید.

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

در این نمونه، سه رنگ به شکل مساوی پیرامون مرکز پخش می شوند.

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

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

افزون براین می توانید تعداد رنگ ها را افزایش دهید.

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

سه رنگ با درجه های مشخص

برای کنترل دقیق بر سهم هر رنگ، درجات را مشخص کنید.

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

ساخت نمودار دایره ای (Pie)

با افزودن border-radius: 50% گرادیان به شکل دایره در می آید؛ بنابراین برای نمودارهای دایره ای بسیار کاربردی است.

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

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

زاویه شروع: from angle

ویژگی from <angle> کل گرادیان را می چرخاند.

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

مرکز گرادیان: at position

با پارامتر at مرکز گرادیان را جابه جا کنید؛ در نتیجه تمرکز رنگ ها تغییر می کند.

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

repeating-conic-gradient()

برای ایجاد الگوی تکرارشونده از repeating-conic-gradient() بهره ببرید.

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

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

نکته: برای ادامه مطالعه، مبحث گرادیان خطی و گرادیان شعاعی را ببینید. همچنین اگر در طراحی کارت ها سایه می خواهید، به سایه ها مراجعه کنید. این صفحه گرادیان مخروطی CSS را نیز برای مراجعه سریع نشان گذاری کنید. افزون براین راهنمای repeating-conic-gradient() در MDN بسیار مفید است.