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

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

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

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

إذا أردتَ إنشاء تدرج لوني خطي يُكرِّر نفسه حتى يملأ العنصر الحاوي له، فاستخدم الدالة الدالة <code>[[CSS/repeating-linear-gradient|repeating-linear-gradient()]]‎</code>.

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

== أمثلة ==
مثال عن تدرج لوني خطي يميل بمقدار 45 درجة:<syntaxhighlight lang="css">
body {
  background: linear-gradient(45deg, red, blue);
}
</syntaxhighlight>مثال عن تدرج لوني يبدأ بعد 60% من نقطة بداية خط التدرج:<syntaxhighlight lang="css">
body {
  background: linear-gradient(135deg, orange, orange 60%, cyan);
}
</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
|}

== بنية التدرجات اللونية الخطية ==
يُعرَّف التدرج اللوني الخطي بمحور يُسمى خط التدرج (gradient line) ونقطتَي توقف لونيتين أو أكثر، وكل نقطة على المحور لها لونٌ خاصٌ بها وذلك لجعل التدرج اللوني سلسًا؛ وما تفعله الدالة <code>linear-gradient()‎</code> هو رسم خطوط ملوّنة معامدة لخط التدرج، وكل خط له لونٌ مطابقٌ للون النقطة التي يتقاطع معها على خط التدرج.
[[ملف:Linear-gradient.png|بديل=توضيح بنية وتركيب التدرجات اللونية الخطية.|بدون|تصغير|توضيح بنية وتركيب التدرجات اللونية الخطية.]]يُعرَّف خط التدرج بإحداثيات مركز الصندوق الحاوي على التدرج اللوني وبقيمةٍ زاويّة <code>[[CSS/angle|<angle>]]</code>، وألوان التدرج تُحدَّد بنقطتين أو أكثر: نقطة البداية ونقطة النهاية، ونقط توقف لوني اختيارية بينهما.

نقطة البداية هي موضعٌ على خط التدرج الذي يبدأ فيها أوّل لون بالتدرج، ونقطة النهاية هي موضعٌ على خط التدرج الذي ينتهي فيه آخر لون؛ وهاتان النقطتان تُعرَّفان عبر تقاطع خط التدرج مع خطٍ معامدٍ له يمر من زاوية الصندوق الذي في نفس الربع (quadrant) الموجود فيه خط التدرج في تلك المنطقة؛ لاحظ أنَّ من الممكن عدّ نقطة النهاية على أنها نظيرة نقطة البداية بالنسبة إلى المركز؛ وهذه التعريفات المُعقّدة تؤدي إلى تأثيرٍ مثيرٍ للاهتمام يُسمى عادةً «الأركان السحرية» (magic corners): فالركنان القريبان من نقطة البداية والنهاية لهما نفس القيمة اللونية لنقطة البداية أو النهاية الموافقة للركن.

يمكن إضافات محطات توقف لوني على خط التدرج، وبذلك تستطيع تخصيص الانتقال بين لونَي البداية والنهاية، ويمكن تعريف موضع التوقف اللوني باستخدم طول مطلق <code>[[CSS/length|<length>]]</code> أو نسبة مئوية <code>[[CSS/percentage|<percentage>]]</code>، وإذا لم تُحدِّد موضعًا للتوقف اللوني فسيوضع في منتصف المسافة بين التوقف اللوني الذي يسبقه والذي يليه.

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

===  <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">
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>

== انظر أيضًا ==
* صفحة القيمة <code>[[CSS/gradient|gradient]]</code> وهو نوع البيانات <code><gradient></code> في CSS هو نوعٌ خاصٌ من الصور <code>[[CSS/image|<image>]]</code> الذي يُمثِّل تدرجًا لونيًا بين لونين أو أكثر.
* صفحة الدالة <code>[[CSS/radial-gradient|()radial-gradient]]</code> التي تُنشِئ تدرجًا لونيًا بين لونين أو أكثر على شكل أشعة تبدأ من المبدأ.
* صفحة الدالة <code>[[CSS/repeating-linear-gradient|()repeating-linear-gradient]]</code> التي تُنشِئ صورةً تحتوي على تدرجات لونية خطيّة مكررة.
* صفحة الدالة <code>[[CSS/repeating-radial-gradient|()repeating-radial-gradient]]</code> التي تُنشِئ صورةً تحتوي على تدرجات لونية مكررة على شكل أشعة تبدأ من المبدأ.

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