آموزش تابع radial-gradient در CSS

تابع radial-gradient() در CSS برای ایجاد گرادیانت‌های شعاعی استفاده می‌شود، که رنگ‌ها از یک نقطه مرکزی به بیرون گسترش می‌یابند. این تابع امکان ایجاد پس‌زمینه‌های دایره‌ای و بیضوی با افکت‌های زیبا را فراهم می‌کند. برای یادگیری کامل CSS و مثال‌های عملی، به دوره آموزش CSS مراجعه کنید.

ساختار تابع radial-gradient

radial-gradient(shape size at position, start-color, ..., last-color)

- shape: شکل گرادیانت (circle یا ellipse)
- size: اندازه گرادیانت (closest-side, farthest-corner, ...)
- position: نقطه شروع گرادیانت
- start-color و last-color: رنگ‌های شروع و پایان

مثال عملی تابع radial-gradient

.box {
    background: radial-gradient(circle at center, #ff7e5f, #feb47b);
    width: 200px;
    height: 200px;
}

جدول ویژگی‌ها و توضیحات

نکات مهم

• می‌توان از چندین رنگ با نقاط توقف مختلف استفاده کرد.
• تابع radial-gradient() می‌تواند به عنوان background-image یا background تعریف شود.
• ترکیب radial-gradient با opacity و rgba باعث ایجاد افکت‌های شفاف و زیبا می‌شود.
• قابل استفاده برای دکمه‌ها، بخش‌ها و پس‌زمینه‌های صفحات وب است.

ادامه آموزش

برای یادگیری کامل CSS و گرادیانت‌ها، حتماً دوره آموزش CSS را مشاهده کنید.