التدرجات

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

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

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

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

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

الاتجاه اختياري. إذا تركته، فإن linear-gradient() ينتقل من الأعلى إلى الأسفل، مثل to bottom:

background: linear-gradient(#ff9966, #ff5e62); /* من الأعلى إلى الأسفل */

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

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

التحدي

سهل

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

من الأعلى إلى الأسفل
يبدأ باللون #FFD700 (ذهبي)
ينتقل إلى اللون #FF4500 (أحمر برتقالي)

جرّب بنفسك

<!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>