التدرجات
جزء من قسم 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)
جرّب بنفسك
<!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>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس CSS Mastery
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعة