الدرس 6: الألوان والخطوط | المستوى الثاني

👨‍💻

كتبه: فريق أكاديمية البرمجة

تم تحديثه: 10 يوليو 2026 | مدة القراءة: 15 دقيقة

🔍 ليه اختيار الألوان والخطوط بيحدد نجاح موقعك؟

في تصميم المواقع، الألوان والخطوط مش بس "تجميل" — هما أدوات نفسية بتأثر على قرارات المستخدم. من خلال خبرتي في تصميم أكتر من 50 موقع، لاحظت إن:

🎨 93% من قرار الشراء بيعتمد على المظهر البصري
📝 الخطوط الصحيحة بتزود وقت القراءة بنسبة 30%
🎯 التباين (Contrast) الكافي بيقلل إرهاق العين وبيحسن SEO (Core Web Vitals)

في الدرس ده هنتعلم:

✅ 4 أنظمة للألوان في CSS وإمتى نستخدم كل واحدة
✅ خلفيات متقدمة (تدرجات، صور، Fixed)
✅ اختيار الخطوط العربية والإنجليزية
✅ وحدات القياس — إزاي نبني تصميم متجاوب
✅ أدوات مجانية لاختيار الألوان والخطوط

⚠️ نصيحة من خبرة: موقع بألوان متناسقة وخطوط واضحة بيحسن معدل التحويل (Conversion Rate) بنسبة 24%. العكس: ألوان متضاربة أو خطوط صعبة القراءة = زائر يمشي في 5 ثواني!

🎨 أنظمة الألوان في CSS — 4 طرق للكتابة

CSS بيدعم 4 أنظمة رئيسية للألوان. كل نظام ليه استخداماته — مش كلهم مناسبين لكل موقف.

1️⃣ أسماء الألوان (Color Names) — للتجارب السريعة

CSS بيدعم 140 اسم لون — من red لـ lightgoldenrodyellow. بس في الواقع، بنستخدم 20 اسم بس، والباقي بيكون غير عملي.

/* ✅ أسماء شائعة */
color: red;
color: blue;
color: green;
color: white;
color: black;
color: transparent;  /* شفاف تمامًا */

/* ❌ تجنب الأسماء الغريبة */
/* color: lightgoldenrodyellow;  -- صعب التذكر! */
        

💡 متى نستخدمه؟ في التجارب السريعة (Prototyping) أو لو بتعلم. في المشاريع الحقيقية، استخدم HEX أو HSL.

2️⃣ HEX — الأكثر شيوعًا ⭐

النظام ده هو "لغة المصممين" — بيستخدم 6 أرقام/حروف (0-9, A-F) لتمثيل اللون. كل لونين بيمثلوا قناة: الأحمر (RR)، الأخضر (GG)، الأزرق (BB).

/* ✅ HEX — النظام الأكثر شيوعًا */
color: #FF0000;    /* أحمر: RR=FF, GG=00, BB=00 */
color: #00FF00;    /* أخضر: RR=00, GG=FF, BB=00 */
color: #0000FF;    /* أزرق: RR=00, GG=00, BB=FF */
color: #333333;    /* رمادي غامق */
color: #FFFFFF;    /* أبيض */
color: #000000;    /* أسود */

/* ✅ HEX مختصر (Shorthand) — لما الرقمين متشابهين */
color: #F00;      /* = #FF0000 (أحمر) */
color: #333;     /* = #333333 (رمادي) */
        

🌟 نصيحة ذهبية: في المشاريع الكبيرة، استخدم متغيرات CSS (CSS Variables) للألوان. ده بيخلي تغيير لون الموقع كله من مكان واحد:

:root { --primary: #4CAF50; --secondary: #2196F3; }

3️⃣ RGB / RGBA — لما نحتاج شفافية

RGB بيستخدم 3 أرقام (0-255) للأحمر والأخضر والأزرق. RGBA بيضيف قناة رابعة للشفافية (Alpha) من 0.0 (شفاف) لـ 1.0 (معتم).

/* ✅ RGB */
color: rgb(255, 0, 0);       /* أحمر */
color: rgb(76, 175, 80);     /* أخضر (نفس #4CAF50) */

/* ✅ RGBA — مع شفافية */
background: rgba(0, 0, 0, 0.5);   /* أسود شفاف 50% — overlay */
background: rgba(255, 255, 255, 0.9); /* أبيض شفاف 90% — modal */

/* ✅ استخدام RGBA في الظلال */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        

🔥 لماذا RGBA مهم؟ لما تحط overlay على صورة (مثلاً Hero Section)، RGBA بيخليك تتحكم في الشفافية بدون ما تغير لون الخلفية. ده بيخلّي التصميم أكثر مرونة.

4️⃣ HSL / HSLA — الأفضل للتصميم ⭐⭐

HSL (Hue, Saturation, Lightness) هو النظام المفضل للمصممين. بدل ما تفكر في "كم أحمر وكم أخضر"، بتفكر في "اللون نفسه، بس أفتح شوية".

/* ✅ HSL — Hue (0-360), Saturation (0-100%), Lightness (0-100%) */
color: hsl(120, 100%, 50%);   /* أخضر نقي */
color: hsl(120, 100%, 25%);   /* أخضر غامق (نفس اللون، أقل إضاءة) */
color: hsl(120, 100%, 75%);   /* أخضر فاتح (نفس اللون، أكتر إضاءة) */

/* ✅ HSLA — مع شفافية */
background: hsla(200, 80%, 50%, 0.3);
        

🎯 لماذا HSL أفضل للمبتدئين؟ لو عايز تغمق لون معين، بتقلل الـ Lightness. لو عايز تخلي ألوان موقعك متناسقة، بتثبت الـ Hue وبتغير الـ Saturation. ده أسهل بكتير من حساب HEX!

📊 مقارنة بين أنظمة الألوان

النظام	الصيغة	الشفافية	سهولة التعديل	الاستخدام الأمثل
أسماء	`red`	❌ لا	⭐ سهلة	التجارب السريعة
HEX	`#4CAF50`	❌ لا (8 chars للشفافية)	⭐⭐ متوسطة	المشاريع الكبيرة (الأكثر شيوعًا)
RGB	`rgb(76, 175, 80)`	✅ RGBA	⭐⭐⭐ سهلة	الظلال والـ Overlays
HSL	`hsl(122, 39%, 49%)`	✅ HSLA	⭐⭐⭐⭐ أسهل	التصميم والتجارب (الأفضل للمبتدئين)

✨ الخلفيات المتقدمة (Backgrounds)

الخلفية مش بس "لون" — ممكن تكون صورة، تدرج، أو حتى فيديو. هنا أهم الخصائص:

1️⃣ الخلفية المتدرجة (Gradients)

التدرجات بتحول خلفية مملة لشكل احترافي. فيه نوعين: Linear (خطي) و Radial (دائري).

/* ✅ تدرج خطي — من الأعلى للأسفل */
background: linear-gradient(to bottom, #667eea, #764ba2);

/* ✅ تدرج بزاوية */
background: linear-gradient(135deg, #667eea, #764ba2);

/* ✅ تدرج متعدد الألوان */
background: linear-gradient(90deg, #f093fb, #f5576c, #4facfe);

/* ✅ تدرج دائري */
background: radial-gradient(circle, #667eea, #764ba2);

/* ✅ تدرج مع شفافية */
background: linear-gradient(to right, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
        

🌟 موقع مفيد: UI Gradients بيقدم 100+ تدرج جاهز — اختار واحد وانسخ الكود!

2️⃣ الخلفية الصورية (Background Images)

الصور كخلفية بتضيف عمق للتصميم. بس لازم نستخدمها بحذر — صور كبيرة بتبطئ الموقع.

/* ✅ صورة خلفية احترافية */
.hero-section {
    background-image: url('images/hero-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;  /* Parallax Effect */
    min-height: 500px;
}

/* ✅ shorthand — كل حاجة في سطر واحد */
.hero-section {
    background: url('images/hero-bg.jpg') no-repeat center center / cover fixed;
}
        

⚡ background-attachment: fixed بيخلّي الصورة ثابتة لما المستخدم يعمل Scroll — ده بيعمل "Parallax Effect" اللي بيبقى شكله احترافي جدًا. بس حذر: في الموبايل ممكن يسبب مشاكل في الأداء!

📝 الخطوط (Fonts) — اختيار الخطوط العربية

الخطوط بتأثر على قراءة المحتوى بشكل كبير. في المواقع العربية، بنحتاج خطوط تدعم اللغة العربية وتكون واضحة على الشاشات.

1️⃣ الخطوط الافتراضية (System Fonts)

الخطوط دي موجودة على جهاز المستخدم — مفيش حاجة بتتحمل. ده بيخلي الموقع أسرع.

/* ✅ خطوط عربية افتراضية شائعة */
body {
    /* Tahoma: خط واضح للعربية */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ✅ خطوط بديلة للعربية */
.arabic-text {
    font-family: 'Arial', 'Tahoma', 'Helvetica', sans-serif;
}
        

2️⃣ الخطوط المستوردة (Google Fonts) ⭐

Google Fonts بيقدم مئات الخطوط المجانية — منها خطوط عربية ممتازة زي Cairo, Tajawal, و Almarai.

<!-- ✅ استيراد خط عربي من Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" 
      rel="stylesheet">

/* ✅ استخدام الخط */
body {
    font-family: 'Cairo', sans-serif;
}

h1, h2, h3 {
    font-weight: 700;  /* Bold */
}

p {
    font-weight: 400;  /* Normal */
}
        

💡 لماذا display=swap؟ الخاصية دي بتخلي المتصفح يعرض النص بخط افتراضي أولًا، وبعد ما الخط يتحمل يستبدله. ده بيمنع "Flash of Invisible Text" (FOUT) — اللي بيخلي المستخدم يشوف صفحة فاضية لمدة قصيرة.

3️⃣ خصائص الخطوط الأساسية

/* ✅ خصائص الخطوط الكاملة */
body {
    /* نوع الخط */
    font-family: 'Cairo', 'Segoe UI', sans-serif;
    
    /* حجم الخط */
    font-size: 16px;        /* الحجم الأساسي */
    font-size: 1rem;        /* = 16px (مستحسن) */
    
    /* سمك الخط */
    font-weight: 400;       /* 400 = normal, 700 = bold */
    
    /* نمط الخط */
    font-style: normal;     /* أو italic */
    
    /* المسافة بين السطور */
    line-height: 1.6;       /* 1.6 = 160% من حجم الخط */
    
    /* المحاذاة */
    text-align: right;      /* للعربية */
    
    /* التزيين */
    text-decoration: none;  /* إزالة الخط من الروابط */
}
        

📏 وحدات القياس في CSS — إزاي نبني تصميم متجاوب

اختيار الوحدة الصحيحة بيحدد إذا كان موقعك هيبقى متجاوب (Responsive) ولا لأ. هنا أهم الوحدات:

الوحدة	الوصف	الاستخدام	التوصية
`px`	بكسل ثابت	الحدود، الظلال	⚠️ للعناصر الصغيرة فقط
`%`	نسبة مئوية من الأب	العرض، الارتفاع	✅ للتخطيطات
`em`	نسبة لحجم الخط الأب	التباعد الداخلي	⚠️ صعب التتبع
`rem`	نسبة لحجم الخط الجذر (16px)	النصوص، التباعد	✅✅ الأفضل للنصوص
`vw`	1% من عرض الشاشة	العناوين الكبيرة	✅ للعناوين المتجاوبة
`vh`	1% من ارتفاع الشاشة	الأقسام الكاملة	✅ للـ Hero Sections

/* ✅ مثال عملي: Hero Section متجاوب */
.hero {
    /* ارتفاع يساوي 100% من ارتفاع الشاشة */
    min-height: 100vh;
    
    /* تباعد متجاوب */
    padding: 5vh 5vw;
}

.hero h1 {
    /* حجم العنوان يتكيف مع عرض الشاشة */
    font-size: clamp(2rem, 5vw, 4rem);
    /* clamp(min, preferred, max) */
    /* الحجم الأدنى: 2rem، المفضل: 5vw، الأقصى: 4rem */
}
        

🎯 clamp() — السلاح السري! الخاصية دي بتخلي الحجم يتكيف تلقائيًا مع الشاشة: لو الشاشة صغيرة، بيستخدم الحجم الأدنى. لو كبيرة، بيستخدم الحجم الأقصى. وفي النص، بيستخدم القيمة المفضلة. ده بيحل مشكلة "العناوين الصغيرة في الموبايل" من جذورها!

🛠️ أدوات مجانية للمصممين

دي أدوات باستخدمها يوميًا في تصميم المواقع:

🎨 Coolors — توليد Palettes ألوان متناسقة
🎨 UI Gradients — تدرجات جاهزة
📝 Google Fonts — خطوط عربية وإنجليزية مجانية
📐 WebAIM Contrast Checker — التحقق من تباين الألوان (للوصولية)
🎯 Can I Use — التحقق من دعم المتصفحات لأي خاصية

💡 أفضل الممارسات من مشاريع حقيقية

📋 قائمة التحقق قبل نشر أي تصميم:

✅ استخدمت Palette ألوان متناسقة (3-5 ألوان بس)
✅ الخطوط واضحة وسهلة القراءة (Cairo أو Tahoma للعربية)
✅ التباين بين النص والخلفية ≥ 4.5:1 (للوصولية)
✅ الحجم الأساسي للنص ≥ 16px (مستحسن 18px)
✅ المسافة بين السطور ≥ 1.5
✅ اختبرت التصميم على 3 أحجام شاشة (موبايل، تابلت، ديسكتوب)
✅ الصور مضغوطة (أقل من 200KB)

❌ أخطاء شائعة يجب تجنبها:

الخطأ ❌	الصح ✅	السبب
أكتر من 5 ألوان في الموقع	3-5 ألوان متناسقة فقط	الفوضى البصرية بتشتت المستخدم
خطوط صعبة القراءة (زخرفية)	خطوط واضحة (Cairo, Tahoma)	المستخدم بيجي يقرأ مش يتفرج على الخط
نص أصفر على أبيض	تباين عالي (داكن على فاتح)	صعب القراءة وبيأثر على SEO (Accessibility)
صور خلفية كبيرة بدون ضغط	صور مضغوطة + lazy loading	بتبطئ الموقع وتأثر على Core Web Vitals
استخدام px لكل الأحجام	rem للنصوص + vw/vh للتخطيط	px ثابتة ومش بتتكيف مع الشاشات

🎯 تمرين عملي: تصميم Hero Section

طبق اللي اتعلمته في درس عملي. حاول تبني Hero Section (القسم الرئيسي في الصفحة الأولى) يحتوي على:

خلفية متدرجة (Gradient) أو صورة مع Overlay
عنوان كبير بخط Cairo Bold
نص وصفي بلون أبيض شفاف (rgba)
زر "ابدأ الآن" بخلفية متدرجة
التصميم يتكيف مع الموبايل (clamp للعنوان)

/* ✅ Hero Section متجاوب */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)),
                url('images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 2rem;
}

.hero h1 {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.hero .btn {
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: transform 0.3s, box-shadow 0.3s;
}

.hero .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(240, 147, 251, 0.4);
}
        

📖 الدرس القادم: Flexbox & Grid — التخطيط المتجاوب

هنتعلم كيف نبني تصاميم متجاوبة (Responsive) باستخدام Flexbox و CSS Grid — الأدوات الحديثة اللي بتحل 90% من مشاكل التخطيط! 📐

🌈 الألوان والخطوط في CSS: دليل المصمم العربي