التدرجات

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 21 من 43.

تتيح لك التدرجات (Gradients) في CSS إنشاء انتقالات سلسة بين لونين أو أكثر.

لنبدأ بتدرج خطي بسيط:

/* إنشاء تدرج خطي من الأعلى إلى الأسفل */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

يؤدي هذا إلى إنشاء تدرج ينتقل من اللون البرتقالي (#ff9966) في الأعلى إلى لون مائل للاحمرار (#ff5e62) في الأسفل.

يمكنك أيضاً تحديد الاتجاه واستخدام ألوان متعددة كما في المثال التالي:

/* إنشاء تدرج خطي من اليسار إلى اليمين */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

التحدي

سهل

أنشئ قاعدة CSS لفئة تسمى sunset-gradient تطبق خلفية بتدرج لوني خطي (linear gradient). يجب أن يقوم التدرج بما يلي:

ينتقل من الأعلى إلى الأسفل
يبدأ باللون #FFD700 (gold)
ينتقل إلى اللون #FF4500 (orangered)

ورقة مرجعية

تنشئ تدرجات CSS انتقالات سلسة بين الألوان باستخدام الدالة linear-gradient():

/* تدرج خطي أساسي من الأعلى إلى الأسفل */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

/* تدرج خطي مع اتجاه وألوان متعددة */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

تشمل الاتجاهات الشائعة to bottom، و to right، و to left، و to top.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <style>
    .sunset-gradient {
      border: 3px solid black;
      height: 300px;
      width: 100%;
       /* Write your CSS rule here */
       
       
    }
  </style>
</head>
<body>
  <div class="sunset-gradient"></div>
</body>
</html>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.