انواع گرادیان در CSS
گرادیان‌ها در CSS ابزار قدرتمندی برای ایجاد انتقال نرم بین رنگ‌ها هستند که به طراحی‌های وب عمق و جذابیت می‌بخشند. در این مقاله به بررسی سه نوع اصلی گرادیان شامل Linear، Radial و Conic می‌پردازیم.
گرادیان خطی (Linear Gradient)
گرادیان خطی ساده‌ترین و پرکاربردترین نوع گرادیان است که رنگ‌ها در امتداد یک خط مستقیم تغییر می‌کنند. این گرادیان با استفاده از تابع linear-gradient() ایجاد می‌شود.
- جهت‌دهی: به صورت افقی، عمودی یا زاویه‌دار
- تعداد رنگ: نامحدود (حداقل دو رنگ)
- نقاط توقف: کنترل دقیق محل تغییر رنگ‌ها
| مثال |
توضیح |
| background: linear-gradient(red, blue); |
گرادیان عمودی از قرمز به آبی |
| background: linear-gradient(45deg, red, blue); |
گرادیان با زاویه 45 درجه |
گرادیان شعاعی (Radial Gradient)
گرادیان شعاعی رنگ‌ها را از یک نقطه مرکزی به سمت بیرون پخش می‌کند. این نوع گرادیان با تابع radial-gradient() ایجاد شده و برای ایجاد افکت‌های دایره‌ای مناسب است.
نکته: می‌توانید شکل گرادیان شعاعی را به صورت دایره یا بیضی تعریف کنید و موقعیت مرکز آن را تغییر دهید.
- شکل: دایره (circle) یا بیضی (ellipse)
- موقعیت مرکز: قابل تنظیم با مقادیر مانند center, top, left
- اندازه: closest-side, farthest-corner و ...
گرادیان مخروطی (Conic Gradient)
گرادیان مخروطی جدیدترین نوع گرادیان در CSS است که رنگ‌ها حول یک نقطه مرکزی چرخش می‌کنند. این گرادیان با تابع conic-gradient() ایجاد می‌شود و برای ایجاد نمودارهای دایره‌ای ایده‌آل است.
برای یادگیری عمیق‌تر درباره گرادیان‌ها در CSS، می‌توانید به آموزش جامع اینجا را کلیک نمایید مراجعه کنید.
مقایسه انواع گرادیان:
- گرادیان خطی: مناسب برای هدرها و دکمه‌ها
- گرادیان شعاعی: ایده‌آل برای افکت‌های نورپردازی
- گرادیان مخروطی: بهترین گزینه برای نمودارهای دایره‌ای
با ترکیب این گرادیان‌ها و تنظیم پارامترهای مختلف می‌توانید افکت‌های بصری خیره‌کننده‌ای ایجاد کنید. به یاد داشته باشید که استفاده بیش از حد از گرادیان‌های پیچیده ممکن است باعث کاهش عملکرد صفحه شود.
