گرادیان شعاعی در CSS
گرادیان شعاعی در CSS
گرادیان‌های شعاعی در CSS ابزاری قدرتمند برای ایجاد افکت‌های بصری جذاب هستند که در آن رنگ‌ها به صورت دایره‌ای یا بیضی‌شکل از مرکز به بیرون تغییر می‌کنند. برخلاف گرادیان خطی که تغییر رنگ در یک جهت مستقیم اتفاق می‌افتد، گرادیان شعاعی تمرکز بیشتری بر نقطه مرکزی دارد.
نکته کلیدی: گرادیان‌های شعاعی به‌ویژه برای طراحی دکمه‌ها، پس‌زمینه‌ها و ایجاد جلوه‌های سه‌بعدی ایده‌آل هستند.
سینتکس پایه
ساختار اصلی گرادیان شعاعی به این شکل است:
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
| پارامتر | توضیحات |
|---|---|
| shape | مشخص‌کننده شکل گرادیان (circle یا ellipse) |
| size | تعیین اندازه (closest-side, farthest-corner و...) |
| position | موقعیت مرکز گرادیان (مثلاً 50% 50%) |
| color-stop | نقاط تغییر رنگ با مقدار اختیاری موقعیت (مثلاً red 20%) |
مثال‌های کاربردی
در اینجا چند نمونه عملی از گرادیان شعاعی را مشاهده می‌کنید:
- گرادیان دایره‌ای ساده:
background: radial-gradient(circle, red, yellow, green);
- گرادیان بیضوی با موقعیت سفارشی:
background: radial-gradient(ellipse at 30% 70%, blue, white);
- گرادیان با نقاط توقف دقیق:
background: radial-gradient(circle, red 0%, orange 50%, yellow 100%);
کاربردهای پیشرفته
گرادیان‌های شعاعی می‌توانند برای ایجاد افکت‌های پیچیده‌تر ترکیب شوند:
- ایجاد سایه‌های طبیعی برای دکمه‌ها
- طراحی نورپردازی واقع‌گرایانه
- شبیه‌سازی سطوح بازتابنده
- تولید افکت‌های مینیمالیستی مدرن
برای یادگیری عمیق‌تر درباره این ویژگی CSS، می‌توانید اینجا را مطالعه کنید. این منبع به‌صورت جامع تمام جنبه‌های گرادیان شعاعی را پوشش داده است.
توجه: گرادیان‌های شعاعی در تمام مرورگرهای مدرن پشتیبانی می‌شوند، اما برای سازگاری با نسخه‌های قدیمی‌تر، بهتر است از پیشوندهای vendor استفاده کنید.