التدرجات CSS

خلفية التدرج

يُمكن لـ CSS التدرج أن يظهر انتقال سلس بين لونين أو أكثر.

يحدد CSS نوعين من التدرجات:

  • التدرج الخطي((إلى الأسفل/إلى الأعلى/إلى اليسار/إلى اليمين/بزاوية))
  • التدرج المتناوب((بما يعتمد على مركزه))

التدرج الخطي CSS

لإنشاء تدرج خطي، يجب عليك تحديد على الأقل لونين. اللون هو اللون الذي تريد ظهور التدرج فيه. يمكنك أيضًا تعيين النقطة البداية والاتجاه (أو الزاوية) وتأثير التدرج.

النحو

background-image: linear-gradient(اتجاه, color-stop1, color-stop2, ...);

التدرج الخطي - من الأعلى إلى الأسفل (الافتراضي)

النموذج التالي يظهر التدرج الخطي من الأعلى. يبدأ بالأحمر وينتقل إلى الأصفر:

من الأعلى إلى الأسفل (الافتراضي)

مثال

#grad {
  background-image: linear-gradient(red, yellow);
}

تجربة شخصية

تدرج خطي - من اليسار إلى اليمين

يوضح المثال التالي التدرج الخطي الذي يبدأ من اليسار. يبدأ من الأحمر وينتقل إلى الأصفر:

من اليسار إلى اليمين

مثال

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

تجربة شخصية

تدرج خطي - مائل

يمكنك تحقيق التدرج المائلا من خلال تحديد المواضع الأفقية والعمودية.

يوضح المثال التالي التدرج الخطي الذي يبدأ من الزاوية العلوية اليسرى (إلى الزاوية السفلية اليمنى). يبدأ من الأحمر وينتقل إلى الأصفر:

من أعلى اليسار إلى أسفل اليمين

مثال

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

تجربة شخصية

استخدام الزاوية

إذا كنت ترغب في التحكم بشكل أكبر في زاوية التدرج، يمكنك تعريف زاوية لتستبدل الاتجاهات المسبقة (إلى الأسفل، إلى الأعلى، إلى اليمين، إلى اليسار، إلى اليمين السفلي وما إلى ذلك). القيمة 0deg تساوي إلى الأعلى (to top). القيمة 90deg تساوي إلى اليمين (to right). القيمة 180deg تساوي إلى الأسفل (to bottom).

180deg

النحو

background-image: linear-gradient(angle, color-stop1, color-stop2);

يحدد هذا الزاوية الزاوية بين الخط المستقيم والخط التدرجي.

يوضح المثال التالي كيفية استخدام الزاوية في التدرج الخطي:

مثال

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

تجربة شخصية

استخدام مؤشرات لون متعددة

يوضح المثال التالي التدرج الخطي المزود بمؤشرات لون متعددة (من أعلى إلى أسفل):

مثال

#grad {
  background-image: linear-gradient(red, yellow, green);
}

تجربة شخصية

يوضح المثال التالي كيفية استخدام الألوان الزاهية و نص لإنشاء تدرج خطي (من اليسار إلى اليمين):

خلفية التدرج

مثال

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

تجربة شخصية

استخدام الشفافية

يدعم CSS التدرج الشفافية أيضًا، ويمكن استخدامه أيضًا لإنشاء تأثيرات التدرج.

لإضافة الشفافية، نستخدم دالة rgba() لتحديد مؤشر اللون. يمكن أن يكون آخر معامل لدالة rgba() قيمة بين 0 و 1، ويعرف شفافية اللون: 0 يعني شفافية كاملة، و 1 يعني لون كامل (بدون شفافية).

النموذج التالي يعرض التدرج الخطي من اليسار. يبدأ بالشفافية الكاملة، ثم ينتقل إلى اللون الأحمر الكامل:

مثال

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

تجربة شخصية

التدرج الخطي المكرر

repeating-linear-gradient() الوظيفة المكررة للتدرج الخطي:

مثال

التدرج الخطي المكرر:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

تجربة شخصية