التدرجات
جزء من قسم 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تحدي المراجعةتدرّب بنفسك: Playground لـ Web