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

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

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

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

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

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

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

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

نکات مهم

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

ادامه آموزش

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