عرض مصدر CSS/repeating-linear-gradient

<noinclude>{{DISPLAYTITLE:الدالة <code>repeating-linear-gradient()‎</code>}}</noinclude>
الدالة <code>repeating-linear-gradient()‎</code> في CSS تُنشِئ صورةً تحتوي على تدرجات لونية خطيّة مكررة، وهي شبيهة بالدالة <code>[[CSS/linear-gradient|linear-gradient()‎]]</code> وتأخذ نفس الوسائط، لكنها تُكرِّر محطات التوقف اللوني في جميع الجهات إلى ما لا نهاية، والنتيجة هي كائن من نوع البيانات <code>[[CSS/gradient|<gradient>]]</code> الذي هو نوعٌ خاصٌ من <code>[[CSS/image|<image>]]</code>.<syntaxhighlight lang="css">
/* التدرج اللوني المكرر مائل بزاوية 45 درجة
   يبدأ باللون الأزرق وينتهي باللون الأحمر */
repeating-linear-gradient(45deg, blue, red);

/* يبدأ التدرج اللوني المكرر من الركن السفلي الأيمن وينتهي بالركن العلوي الأيسر
   يبدأ باللون الأزرق وينتهي باللون الأحمر */
repeating-linear-gradient(to left top, blue, red);

/* يبدأ التدرج اللوني المكرر من الأسفل إلى الأعلى
   يبدأ باللون الأزرق، ويتحول إلى الأخضر بعد 40% من طوله
   ثم ينتهي باللون الأحمر */
repeating-linear-gradient(0deg, blue, green 40%, red);
</syntaxhighlight>لا تملك التدرجات اللونية في CSS أبعادًا فعليةً، أي ليس لها قياس مُحدَّد ولا نسبة أبعاد، وستُعرَض حسب أبعاد العنصر المحتواة فيه.

عند كل تكرر، فستتحرك مواضع التوقف اللوني بأضعاف طول التدرج اللوني الأساسي (أي المسافة بين أوّل وآخر محطة توقف لوني)، وبالتالي سيكون موضع آخر محطة توقف لوني متوافقة مع موضع أوّل محطة توقف لوني، وإذا كان لون البداية ولون النهاية مختلفَين، فسينتج انتقال غير تدريجي (حاد) بين اللونين.

لمّا كانت التدرجات اللونية تنتمي إلى نوع البيانات <code>[[CSS/image|<image>]]</code>، فيمكن استخدامها حيث يمكن استخدام نوع البيانات <code>[[CSS/image|<image>]]</code>، ولهذا السبب لا يمكن استخدام الدالة <code>repeating-linear-gradient()‎</code> مع الخاصية <code>[[CSS/background-color|background-color]]</code> وغيرها من الخاصيات التي تستعمل نوع البيانات <code>[[CSS/color value|<color>]]</code>.

== أمثلة ==
مثال عن تدرج لوني خطي مُكرَّر على شكل خطوط بيضاء وسوداء:<syntaxhighlight lang="css">
body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
}
</syntaxhighlight>مثال عن تكرار خطوط أفقيًا باستخدام التدرجات اللونية:<syntaxhighlight lang="css">
body {
  background-image: repeating-linear-gradient(to bottom,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}
</syntaxhighlight>

==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|10.0 (مع السابقة <code>-webkit-</code>)
26.0
|3.6 (مع السابقة <code>-moz-</code>)
16.0
|10.0
|12.1
|5.1 (مع السابقة <code>-webkit-</code>)
6.0
|}

== البنية العامة ==
=== القيمة <code><side-or-corner></code> ===
نقطة بداية خط التدرج، وإذا حُدِّدات فهي تحتوي على الكلمة <code>to</code> وكلمة محجوزة أو كلمتين محجوزتين: واحدة تُحدِّد الجانب الأفقي (<code>left</code> أو <code>right</code>)، والثانية تُحدِّد الجانب الرأسي (<code>top</code> أو <code>bottom</code>)، لاحظ أنَّ ترتيب هاتين الكلمتين المحجوزتين غير مهم، وإذا لم تُحدَّد هذه القيمة فالقيمة الافتراضية هي <code>to bottom</code>.

القيم <code>to top</code> و <code>to bottom</code> و <code>to left</code> و <code>to right</code> تكافئ القيم الزاويّة <code>0deg</code> و <code>180deg</code> و <code>270deg</code> و <code>90deg</code> على التوالي وبالترتيب.

=== القيمة <code>[[CSS/angle|<angle>]]</code> ===
زاوية ميّل خط التدرج، والقيمة <code>0deg</code> تكافئ <code>to top</code>، وزيادة القيمة عن <code>0deg</code> ستؤدي إلى تدوير خط التدرج باتجاه عقارب الساعة.

=== القيمة <code><color-stop></code> ===
قيمة لونيّة <code>[[CSS/color value|<color>]]</code> يتبعها -اختياريًا- موضع التوقف، ويمكن أن يكون الموضع نسبةً مئويةً <code>[[CSS/percentage|<percentage>]]</code> أو طولًا مطلقًا <code>[[CSS/length|<length>]]</code>.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <percentage> | <length> ]?
</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-images-3/#repeating-gradients CSS Image Values and Replaced Content Module Level 3].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Data Type|{{SUBPAGENAME}}]]