گرادیان مخروطی (Conic Gradients) در CSS
گرادیان مخروطی نوعی گرادیان است که انتقال رنگ‌ها به صورت چرخشی حول یک نقطه مرکز انجام می‌شود. برای ایجاد یک گرادیان مخروطی باید حداقل دو رنگ تعریف کنید.
دستور سینتکس:
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);- from angle: زاویه‌ای است که کل گرادیان مخروطی به آن میزان چرخانده می‌شود.
- at position: موقعیت مرکز گرادیان را مشخص می‌کند. مقدار پیش‌فرض “center” است.
- degree: زاویه رنگ‌های گرادیان.
گرادیان مخروطی: سه رنگ
در این مثال، یک گرادیان مخروطی با سه رنگ ایجاد شده است:
#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 angle) مشخص
زاویه شروع کل گرادیان را می‌توان با from angle مشخص کرد:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
}گرادیان مخروطی با مرکز مشخص
موقعیت مرکز گرادیان با استفاده از at position تعیین می‌شود. در این مثال، مرکز در مختصات ۶۰٪ از چپ و ۴۵٪ از بالا قرار دارد:
#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%;
}گرادیان مخروطی تکراری با رنگ‌های مشخص:
#grad {
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام