الإعلام الآلي — CSS: الألوان والخلفيات والتدرجات Gradients — السنة الرابعة متوسط — المنهاج الجزائري

CSS: الألوان والخلفيات والتدرجات (Gradients)

CSS توفر العديد من الخصائص لتنسيق الألوان والخلفيات في صفحات الويب، بما في ذلك التدرجات اللونية والصور كخلفية.

أنظمة الألوان في CSS

الأسماء: red, blue, green, darkblue, lightcoral (147 اسماً معروفاً).

Hex: #FF0000 (أحمر)، #00FF00 (أخضر)، #0000FF (أزرق).

RGB: rgb(255, 0, 0) = أحمر، rgb(0, 255, 0) = أخضر.

RGBA: rgba(255, 0, 0, 0.5) = أحمر مع شفافية 50%.

HSL: hsl(0, 100%, 50%) = أحمر (0° درجة، 100% تشبع، 50% إضاءة).

خاصية الخلفية (Background)

.box {

background-color: lightblue;

background-image: url(‘pattern.png’);

background-repeat: no-repeat; /* منع تكرار الصورة */

background-position: center; /* توسيط الصورة */

background-size: cover; /* تغطية العنصر بالكامل */

}

يمكن اختصار كل هذه الخصائص في: background: lightblue url(‘pattern.png’) no-repeat center cover;

التدرجات (Gradients)

تدرج خطي: background: linear-gradient(to right, red, yellow);

تدرج دائري: background: radial-gradient(circle, blue, green);

تدرج متعدد الألوان: background: linear-gradient(45deg, red, orange, yellow, green, blue);

تمارين

التمرين 1: أنشئ بطاقة (card) مع تدرج لوني من الأزرق إلى الأرجواني كخلفية.

التمرين 2: أضف صورة خلفية لصفحة ويب مع ضبط حجمها لتغطية الشاشة بالكامل.

للمزيد من الدروس، راجع درس CSS: تنسيق صفحات الويب ودرس CSS3: الحركات والانتقالات.