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

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

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

repeating-linear-gradient(direction, color-stop1, color-stop2, ...)

- direction: جهت گرادیانت (مثلاً to right, to bottom, 45deg)
- color-stop: رنگ‌ها و نقاط توقف آن‌ها

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

.stripe {
    background: repeating-linear-gradient(
        45deg,
        #ff7e5f,
        #ff7e5f 20px,
        #feb47b 20px,
        #feb47b 40px
    );
    width: 200px;
    height: 200px;
}

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

نکات مهم

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

ادامه آموزش

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