✨ أضف الحياة لتصميمك: دليل الظلال في CSS

مرحباً بك في عالم التأثيرات البصرية! 🎨 بعد أن تعلمنا كيفية تنسيق الألوان والحدود، حان الوقت لإضافة البُعد والعمق لتصميماتنا. الظلال (Shadows) هي واحدة من أبسط وأقوى الأدوات التي يمكن أن ترفع من شكل موقعك من مجرد عناصر مسطحة إلى تصميمات تفاعلية وحديثة. في هذا الدرس، سنتعلم كيفية استخدام الظلال في CSS خطوة بخطوة.

📦 الظلال للعناصر: خاصية box-shadow

خاصية box-shadow هي الأداة الرئيسية لإضافة ظلال حول أي عنصر له شكل صندوقي (Box)، مثل <div>، أو <section>، أو <button>.

التركيب الأساسي للخاصية:

selector {
  box-shadow: offset-x offset-y blur-radius spread-radius color;
}

دعونا نشرح كل جزء من هذه القيم:

  1. offset-x (الإزاحة الأفقية): تحدد مدى تحرك الظل أفقيًا. القيمة الموجبة تدفع الظل لليمين، والقيمة السالبة تدفعه لليسار.
  2. offset-y (الإزاحة الرأسية): تحدد مدى تحرك الظل عموديًا. القيمة الموجبة تدفع الظل للأسفل، والقيمة السالبة تدفعه للأعلى.
  3. blur-radius (نصف قطر التمويه): كلما زادت هذه القيمة، أصبح الظل أكثر نعومة وانتشاراً. إذا كانت القيمة 0، سيكون الظل حاداً تماماً.
  4. spread-radius (نصف قطر الانتشار): (اختياري) تتحكم في حجم الظل. القيم الموجبة تكبر الظل، والقيم السالبة تصغره.
  5. color (اللون): (اختياري) تحدد لون الظل. يمكن استخدام أي صيغة ألوان تعلمناها (مثل #333، rgba()). إذا لم تحدد لوناً، سيعتمد المتصفح على لون النص الافتراضي للعنصر.

🧪 أمثلة عملية على box-shadow

لنطبق ما تعلمناه! تخيل أن لدينا <div> بكلاس اسمه .card.

المثال 1: ظل بسيط أسفل العنصر

هذا هو النمط الأكثر شيوعاً، يعطي إحساساً بأن العنصر مرتفع قليلاً عن الصفحة.

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل أسفل العنصر */
  padding: 20px;
  background-color: white;
}

الشرح: الظل لن يتحرك أفقياً (0)، سيتحرك 4 بيكسل للأسفل (4px)، سيكون مموهاً بـ 8 بيكسل (8px)، ولونه أسود شفاف بنسبة 10% (rgba(0,0,0,0.1)).

المثال 2: ظل داخلي (Inset Shadow)

يمكننا جعل الظل يظهر داخل العنصر وليس خارجه، مما يعطي إحساساً بأن العنصر منخفض أو محفور. نضيف الكلمة المفتاحية inset في بداية القيمة.

.button {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); /* ظل داخلي */
  background-color: #f0f0f0;
  border: none;
  padding: 10px 20px;
}

المثال 3: ظلال متعددة (Multiple Shadows)

يمكنك إضافة أكثر من ظل لعنصر واحد بفصل القيم بفواصل ,. الظل الأول في القائمة سيكون في الأعلى.

.fancy-box {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1), /* ظل خفيف قريب */
    0 8px 16px rgba(0,0,0,0.15); /* ظل أغمق وأبعد */
}

🔤 الظلال للنصوص: خاصية text-shadow

إذا أردت إضافة ظل للنصوص فقط وليس للعنصر بأكمله، فإن text-shadow هي الخيار الأمثل. تُستخدم كثيراً لجعل النص أكثر وضوحاً على خلفيات فاتحة أو لإضافة لمسة جمالية بسيطة.

تركيب الخاصية:

selector {
  text-shadow: offset-x offset-y blur-radius color;
}

القيم مشابهة لـ box-shadow ولكن بدون قيمة spread-radius.

مثال على text-shadow:

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* ظل للنص */
  color: #2c3e50;
}

الشرح: الظل سيتحرك 2 بيكسل لليمين و 2 بيكسل للأسفل، وسيكون مموهاً بـ 4 بيكسل، ولونه أسود شفاف بنسبة 30%.

💡 نصائح احترافية لاستخدام الظلال

  1. استخدم rgba() للشفافية: استخدام rgba() للون الظل (كما في الأمثلة) يعطيك تحكماً رائعاً في شفافية الظل ويجعله يندمج بشكل أفضل مع الخلفية.
  2. الاعتدال مفتاح الجمال: الظلال الثقيلة جداً يمكن أن تجعل التصميم يبدو فوضوياً. ابدأ بقيم صغيرة وزدها تدريجياً.
  3. الظلال تعكس الضوء: فكر في مصدر الضوء في تصميمك. إذا كان الضوء قادماً من أعلى اليسار، فستكون معظم الظلال في أسفل ويمين العناصر.

🧩 تدريب سريع

جرب هذا الكود بنفسك! أنشئ ملف HTML وCSS، واستخدم الكود التالي. ثم قم بتغيير قيم box-shadow وشاهد كيف يتغير التأثير.

<!DOCTYPE html>
<html lang="ar">
<head>
    <style>
        .my-box {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            margin: 50px auto;
            /* جرب تغيير هذه القيم */
            box-shadow: 5px 10px 15px 0px rgba(0,0,0,0.4);
        }
    </style>
</head>
<body>
    <div class="my-box"></div>
</body>
</html>