گرادیان مخروطی در CSS
گرادیان مخروطی در CSS
گرادیان‌های مخروطی (Conic Gradient) یکی از قابلیت‌های جذاب در CSS هستند که به شما امکان ایجاد افکت‌های رنگین‌کمانی و چرخشی را می‌دهند. برخلاف گرادیان‌های خطی یا شعاعی، این نوع گرادیان حول یک نقطه مرکزی چرخیده و رنگ‌ها به صورت زاویه‌دار توزیع می‌شوند.
گرادیان مخروطی، یک تصویر است که شامل یک انتقال رنگ حول یک نقطه مرکزی با چرخش مشخص می‌باشد. این تکنیک برای ایجاد نمودارهای دایره‌ای، نشانگرهای پیشرفت و افکت‌های بصری پویا بسیار کاربردی است.
نحوه استفاده از Conic Gradient
برای ایجاد یک گرادیان مخروطی، از تابع conic-gradient() در ویژگی background یا background-image استفاده می‌کنیم:
| پارامتر | توضیحات |
|---|---|
| موقعیت مرکز | تعیین نقطه چرخش گرادیان (پیش‌فرض: مرکز) |
| زاویه شروع | تعیین زاویه آغازین گرادیان (پیش‌فرض: 0deg) |
| لیست رنگ‌ها | تعیین رنگ‌ها و نقاط توقف آنها |
مثال‌های کاربردی
در اینجا چند نمونه از کاربردهای گرادیان مخروطی را مشاهده می‌کنید:
- چرخه رنگ‌ها: ایجاد یک دایره با طیف کامل رنگ‌ها
- نمودارهای دایره‌ای: نمایش درصدها در فرمت پای (Pie Chart)
- نشانگرهای پیشرفت: ایجاد حلقه‌های پیشرفت دایره‌ای
- افکت‌های بصری: طراحی پس‌زمینه‌های پویا و جذاب
نکته: گرادیان‌های مخروطی در مرورگرهای مدرن به خوبی پشتیبانی می‌شوند، اما برای سازگاری با نسخه‌های قدیمی، بهتر است از fallbackهای مناسب استفاده کنید.
برای یادگیری عمیق‌تر و مشاهده مثال‌های تعاملی، می‌توانید از راهنمای بیشتر بخوانید استفاده نمایید.
مزایای استفاده از گرادیان مخروطی
- عدم نیاز به تصاویر خارجی و کاهش حجم صفحه
- انعطاف‌پذیری بالا در تغییر رنگ‌ها و زوایا
- امکان ایجاد افکت‌های پیچیده با کدنویسی ساده
- بهبود عملکرد و سرعت بارگذاری صفحات
برای ایجاد یک گرادیان مخروطی ساده، کد زیر را امتحان کنید:
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
گرادیان‌های مخروطی در CSS3 معرفی شدند و تحول بزرگی در طراحی‌های مدرن وب ایجاد کردند. با تسلط بر این ویژگی، می‌توانید المان‌های بصری جذابی خلق کنید که قبلاً تنها با نرم‌افزارهای گرافیکی امکان‌پذیر بود.