گرادیان مخروطی (Conic Gradients)
«گرادیان مخروطی (Conic Gradient)» یعنی تغییر رنگ ها دورِ یک مرکز. این افکت روی ویژگی background-image تعریف می شود و حداقل دو رنگ لازم دارد.
تابع conic-gradient() چیست؟
تابع conic-gradient() رنگ ها را حول مرکز می چرخاند. زاویه شروع پیش فرض 0 درجه است. مرکز پیش فرض وسط عنصر است.
نمونه سه رنگ ساده
با سه رنگ شروع کن؛ نوارها برابر پخش می شوند.
#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);
}
نمودار دایره ای سریع (Pie)
با border-radius: 50% شکل دایره ای بساز.
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
چرخاندن کل گرادیان با from
با from 90deg شروع را 90 درجه می چرخانی.
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
}
جابجایی مرکز با at x% y%
مرکز را با درصدها حرکت بده؛ مثل نقشه گنج.
#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%;
}
نکته: اگر متن روی گرادیان است، کنتراست را بسنج. خوانایی مهم است.
گام های عملی سریع
- یک ظرف با عرض و ارتفاع بساز.
- یک
conic-gradient()ساده اعمال کن. - با
fromوatظاهر را دقیق کن.
برای گرادیان های دیگر، صفحه گرادیان ها را ببین. همچنین گرادیان شعاعی را برای مقایسه بررسی کن. عبارت «گرادیان مخروطی» را به عنوان لینک داخلی استفاده کن.
جمع بندی سریع
- گرادیان مخروطی دورِ مرکز می چرخد.
- حداقل دو رنگ نیاز دارد.
- با
fromزاویه شروع را تغییر بده. - با
atمرکز را جابجا کن. - نسخه تکراری طرح های منظم می سازد.