CSS/repeating-linear-gradient

الدالة repeating-linear-gradient()‎ في CSS تُنشِئ صورةً تحتوي على تدرجات لونية خطيّة مكررة، وهي شبيهة بالدالة linear-gradient()‎ وتأخذ نفس الوسائط، لكنها تُكرِّر محطات التوقف اللوني في جميع الجهات إلى ما لا نهاية، والنتيجة هي كائن من نوع البيانات <gradient> الذي هو نوعٌ خاصٌ من <image>.

/* التدرج اللوني المكرر مائل بزاوية 45 درجة
   يبدأ باللون الأزرق وينتهي باللون الأحمر */
repeating-linear-gradient(45deg, blue, red);

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

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

لا تملك التدرجات اللونية في CSS أبعادًا فعليةً، أي ليس لها قياس مُحدَّد ولا نسبة أبعاد، وستُعرَض حسب أبعاد العنصر المحتواة فيه.

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

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

أمثلة

مثال عن تدرج لوني خطي مُكرَّر على شكل خطوط بيضاء وسوداء:

body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
}

مثال عن تكرار خطوط أفقيًا باستخدام التدرجات اللونية:

body {
  background-image: repeating-linear-gradient(to bottom,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	10.0 (مع السابقة -webkit-) 26.0	3.6 (مع السابقة -moz-) 16.0	10.0	12.1	5.1 (مع السابقة -webkit-) 6.0

البنية العامة

القيمة <side-or-corner>

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

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

القيمة <angle>

زاوية ميّل خط التدرج، والقيمة 0deg تكافئ to top، وزيادة القيمة عن 0deg ستؤدي إلى تدوير خط التدرج باتجاه عقارب الساعة.

القيمة <color-stop>

قيمة لونيّة <color> يتبعها -اختياريًا- موضع التوقف، ويمكن أن يكون الموضع نسبةً مئويةً <percentage> أو طولًا مطلقًا <length>.

البنية الرسمية

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

حيث:

<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <percentage> | <length> ]?

مصادر ومواصفات

• مواصفة CSS Image Values and Replaced Content Module Level 3.