الألوان والخلفيات في CSS

الألوان أول ما يلاحظه الزائر في أي موقع، وهي التي تعطيه شخصيته: موقع بنك يختار ألواناً هادئة توحي بالثقة، وموقع ألعاب يختار ألواناً حيوية. في هذا الدرس ستتعلم الطرق المختلفة لكتابة الألوان في CSS، وكيف تضع خلفيات ملونة وصوراً وتدرجات.

أين تُستخدم الألوان؟

أشهر خاصيتين:

h1 {
  color: navy;              /* لون النص */
  background-color: #ffe9a8; /* لون الخلفية */
}

وستجد الألوان أيضاً في خصائص أخرى مثل border-color لإطار العنصر.

الطريقة الأولى: أسماء الألوان

CSS تعرف حوالي 140 لوناً بأسمائها الإنجليزية: red و blue و green و orange و gray، وأخرى أطرف مثل tomato و skyblue و gold.

p {
  color: tomato;
}

سهلة للتجربة، لكنها محدودة: لا تستطيع بها اختيار درجة دقيقة مثل لون شعار شركتك.

الطريقة الثانية: Hex

أشهر طريقة في المواقع الحقيقية. تبدأ بعلامة # ثم 6 خانات تمثل كمية الأحمر ثم الأخضر ثم الأزرق:

.brand {
  color: #5b5bf0;
}

• كل خانتين رقم بالنظام الست عشري، من 00 (لا شيء) إلى ff (أقصى قيمة).
• #000000 أسود، و #ffffff أبيض، و #ff0000 أحمر صافٍ.
• يمكن اختصار اللون إذا تكررت الخانات: #ffffff تُكتب #fff.

لا تحتاج إلى حفظ الأكواد! أدوات المطور في المتصفح ومحررات مثل VS Code فيها منتقي ألوان يعطيك الكود مباشرة.

الطريقة الثالثة: rgb

نفس فكرة hex، لكن بالأرقام العشرية من 0 إلى 255:

.box {
  background-color: rgb(91, 91, 240);
}

تخيّل أنك تخلط ثلاثة أضواء ملونة على مسرح: أحمر وأخضر وأزرق. كل رقم يحدد قوة ضوء واحد. كل الأضواء على أقصى قوة تعطيك أبيض، وكلها مطفأة تعطيك أسود.

الطريقة الرابعة: hsl

أسهل طريقة للتفكير في الألوان، لأنها قريبة من طريقة البشر:

.button {
  background-color: hsl(240, 83%, 65%);
}

• Hue (درجة اللون): رقم من 0 إلى 360 على دائرة الألوان. 0 أحمر، و 120 أخضر، و 240 أزرق.
• Saturation (التشبع): من 0% رمادي باهت إلى 100% لون صارخ.
• Lightness (الإضاءة): من 0% أسود إلى 100% أبيض، و 50% اللون الطبيعي.

ميزتها أنك تصنع درجات متناسقة بسهولة: غيّر الإضاءة فقط، فيصبح عندك لون أفتح للخلفية وأغمق للنص من نفس العائلة.

الشفافية

أضف قيمة رابعة لتحديد درجة الشفافية، من 0 (شفاف تماماً) إلى 1 (معتم تماماً):

.overlay {
  background-color: rgb(0 0 0 / 0.5); /* أسود نصف شفاف */
}

الصيغة القديمة rgba(0, 0, 0, 0.5) تعطي نفس النتيجة وما زالت منتشرة. وهناك أيضاً الخاصية opacity التي تجعل العنصر كله شفافاً، بما فيه النص والصور داخله.

صور الخلفية

يمكنك وضع صورة خلفية لأي عنصر:

.hero {
  background-image: url("images/sky.jpg");
  background-size: cover;      /* غطِّ العنصر كله */
  background-position: center; /* ضع منتصف الصورة في المنتصف */
  background-repeat: no-repeat;
}

• background-size: cover: تكبّر الصورة لتغطي العنصر كله، حتى لو قُصّت أطرافها.
• background-size: contain: تظهر الصورة كاملة داخل العنصر، حتى لو بقيت مساحة فارغة.
• background-repeat: no-repeat: تمنع تكرار الصورة كالبلاط إذا كانت أصغر من العنصر.

صورة خلفية أم img؟

إذا كانت الصورة محتوى له معنى (صورة منتج، صورة شخص) فاستخدم <img> مع alt. أما إذا كانت زخرفة للتصميم فقط، فصورة الخلفية في CSS هي الأنسب.

التدرج اللوني

التدرج (Gradient) انتقال ناعم بين لونين أو أكثر، ويُكتب كأنه صورة خلفية:

.banner {
  background-image: linear-gradient(to left, #5b5bf0, #8e8ef7);
}

الكلمة to left تعني اتجاه التدرج: يبدأ باللون الأول ويتجه يساراً نحو الثاني. يمكنك أيضاً استخدام to bottom أو زاوية مثل 135deg.

التباين أهم من الجمال

تأكد دائماً أن لون النص واضح على خلفيته. نص رمادي فاتح على خلفية بيضاء يبدو أنيقاً، لكنه مُتعب لكثيرين وصعب جداً لضعاف البصر. أدوات المطور في المتصفح تعرض لك نسبة التباين عند فحص أي نص، والمطلوب 4.5:1 على الأقل للنص العادي.

جرّب بنفسك

غيّر قيم الألوان، وجرّب contain بدل cover في صورة الخلفية، وغيّر اتجاه التدرج إلى to bottom:

جرّب بنفسكCSS

محرر الكود (CSS)body { font-family: sans-serif; background: #f7f8fc; } .card { padding: 12px; margin: 8px 0; border-radius: 10px; color: white; } .hex { background-color: #5b5bf0; } .hsl { background-color: hsl(150, 70%, 30%); } .glass { background-color: rgb(0 0 0 / 0.5); } .gradient { background-image: linear-gradient(to left, #5b5bf0, #e44d26); } .photo { height: 70px; background-image: url("/og-default.png"); background-size: cover; background-position: center; }

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• نسيان علامة # في hex: color: 5b5bf0; لا تعمل. الصحيح #5b5bf0.
• مسار خاطئ داخل url: المسار في ملف CSS خارجي يُحسب من مكان ملف CSS وليس من مكان صفحة HTML. إذا كان الملف داخل مجلد css فقد تحتاج url("../images/sky.jpg").
• تباين ضعيف: لا تحكم بعينك فقط على شاشة ساطعة؛ افحص نسبة التباين.

اختبر نفسك

سؤال

أي قيمة تمثل اللون الأبيض؟

#000000#ffffffrgb(0, 0, 0)

سؤال

تريد أن تغطي صورة الخلفية العنصر كله حتى لو قُص جزء منها. أي قيمة تستخدم؟

background-repeat: repeatbackground-size: containbackground-size: cover

الخلاصة

• color للنص، و background-color للخلفية.
• اكتب الألوان بالاسم أو #hex أو rgb() أو hsl()، و hex الأشهر في المواقع.
• الشفافية بقيمة رابعة مثل rgb(0 0 0 / 0.5)، و opacity للعنصر كله.
• background-image مع background-size و background-position لصور الخلفية.
• linear-gradient للتدرجات، والتباين الواضح أهم من أي لون جميل.