ظلال الصندوق وظلال النص

مقدمة في ظلال CSS

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

قبل CSS3، كان إنشاء تأثيرات الظل يتطلب محررات صور أو ملفات PNG مُعدة مسبقًا أو حلول بديلة معقدة متعددة العناصر. اليوم، يتم إنشاء الظلال بسطر واحد من CSS، وهي ديناميكية بالكامل، وتستجيب لتغييرات التخطيط تلقائيًا، ويمكن حتى تحريكها. تُستخدم الظلال بشكل مكثف في تصميم الويب الحديث للإشارة إلى الارتفاع (مدى "ارتفاع" العنصر فوق سطح الصفحة)، وإنشاء التسلسل البصري، وتوفير ملاحظات تفاعلية عند التمرير والنقر، وإنتاج تأثيرات فنية إبداعية.

في هذا الدرس، سنتقن كلًا من box-shadow و text-shadow من صيغتهما الأساسية إلى تقنيات الطبقات المتعددة المتقدمة، وسنستكشف أنماط ارتفاع Material Design، ونتعلم تأثيرات نصية إبداعية مثل التوهج النيوني والنص المنقوش، ونفهم تأثيرات الأداء للظلال، ونبني تصميمات CSS فقط بما في ذلك أسلوب النيومورفيزم الشائع.

خاصية box-shadow: تعمق في الصيغة

تُضيف خاصية box-shadow طبقة ظل واحدة أو أكثر إلى إطار العنصر. على عكس text-shadow، تتبع box-shadow شكل حدود العنصر (بما في ذلك border-radius). هذا يعني أنه إذا كان لديك عنصر مدور، فإن الظل سيكون مدورًا أيضًا. تتضمن الصيغة الكاملة لـ box-shadow ما يصل إلى ست قيم.

/* الصيغة الكاملة */
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] [color];

/* الحد الأدنى المطلوب: offset-x و offset-y */
.shadow-basic {
    box-shadow: 5px 5px;
    /* offset-x: 5px (الظل يتحرك لليمين)
       offset-y: 5px (الظل يتحرك للأسفل)
       blur: 0 (حافة حادة)
       spread: 0 (نفس حجم العنصر)
       color: يُعين افتراضيًا إلى currentColor */
}

/* مع نصف قطر الضبابية */
.shadow-blur {
    box-shadow: 5px 5px 10px;
    /* blur-radius: 10px -- يصبح الظل أكثر نعومة وأكبر */
}

/* مع الضبابية والانتشار */
.shadow-spread {
    box-shadow: 5px 5px 10px 2px;
    /* spread-radius: 2px -- الظل يتوسع بمقدار 2px في جميع الاتجاهات */
}

/* مع لون صريح */
.shadow-color {
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

/* ظل داخلي (داخل العنصر) */
.shadow-inset {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2);
}

فهم كل قيمة

دعنا نفحص كل قيمة في صيغة box-shadow بالتفصيل، لأن فهم ما يتحكم فيه كل معامل بالضبط أمر أساسي لإنشاء تأثيرات ظل دقيقة.

offset-x -- الإزاحة الأفقية للظل. القيمة الموجبة تنقل الظل لليمين. القيمة السالبة تنقله لليسار. القيمة 0 تعني أن الظل في المركز أفقيًا خلف العنصر. هذه قيمة مطلوبة.

offset-y -- الإزاحة العمودية للظل. القيمة الموجبة تنقل الظل للأسفل. القيمة السالبة تنقله للأعلى. القيمة 0 تعني أن الظل في المركز عموديًا خلف العنصر. هذه قيمة مطلوبة.

blur-radius -- يتحكم في ضبابية الظل. القيمة 0 تُنتج ظلًا حادًا بلا ضبابية. كلما ارتفعت القيمة، أصبح الظل أكثر نعومة وانتشارًا. يتم تنفيذ الضبابية كضبابية غاوسية. لا يمكن أن تكون هذه القيمة سالبة. الافتراضي 0.

spread-radius -- يتحكم في حجم الظل نسبة إلى العنصر. القيمة الموجبة توسع الظل. القيمة السالبة تقلصه. القيمة 0 تعني أن الظل بنفس حجم العنصر. يمكن أن تكون سالبة. الافتراضي 0.

color -- لون الظل. أي قيمة لون CSS صالحة تعمل. إذا حُذفت، تكون الافتراضية currentColor. عمليًا، تريد دائمًا تقريبًا استخدام لون RGBA بعتامة منخفضة (مثل 0.1 إلى 0.4) للظلال الواقعية.

inset -- عند وجودها، يُرسم الظل داخل العنصر بدلًا من خارجه. يُنشئ هذا تأثيرًا بصريًا بأن العنصر مضغوط في السطح.

/* بدون ظل (نقطة البداية) */
.no-shadow {
    box-shadow: none;
}

/* إزاحة أفقية فقط -- الظل ينتقل لليمين */
.shadow-right {
    box-shadow: 10px 0px 0px 0px rgba(0, 0, 0, 0.3);
}

/* إزاحة عمودية فقط -- الظل ينتقل للأسفل */
.shadow-down {
    box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.3);
}

/* إزاحات سالبة -- الظل ينتقل لليسار وللأعلى */
.shadow-top-left {
    box-shadow: -10px -10px 0px 0px rgba(0, 0, 0, 0.3);
}

/* ظل مركزي مع ضبابية فقط (تأثير توهج ناعم) */
.shadow-glow {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
}

/* ظل مركزي مع انتشار فقط (تأثير شبيه بالحدود) */
.shadow-border {
    box-shadow: 0px 0px 0px 3px #3498db;
}

/* انتشار سالب -- الظل أصغر من العنصر */
.shadow-shrink {
    box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.3);
}

الظلال الداخلية (Inset Shadows)

تغير كلمة inset المفتاحية الظل من الرسم خارج العنصر إلى الرسم داخله. تُستخدم الظلال الداخلية عادةً لإنشاء مظهر الأزرار المضغوطة، وحقول الإدخال الغائرة، والتوهجات الداخلية، وتأثيرات العمق التي تُوحي بأن العنصر مقطوع في السطح.

/* ظل داخلي أساسي -- العنصر يبدو مضغوطًا في الصفحة */
.pressed {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ظل داخلي قوي -- يُنشئ تأثير بئر عميق */
.well {
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3);
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
}

/* ظل داخلي من جميع الجوانب -- توهج داخلي */
.inner-glow {
    box-shadow: inset 0 0 20px rgba(52, 152, 219, 0.5);
}

/* ظل داخلي على حقل إدخال */
.input-field {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 14px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.input-field:focus {
    border-color: #3498db;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1),
                0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* زر مضغوط باستخدام inset في حالة النشاط */
.btn {
    padding: 12px 24px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

ظلال صندوق متعددة (ظلال طبقية)

واحدة من أقوى ميزات box-shadow هي القدرة على تطبيق ظلال متعددة على عنصر واحد. تفصل بين كل ظل بفاصلة. يتم عرض الظلال بالترتيب المدرجة به، مع الظل الأول في الأعلى (الأقرب للمشاهد) والظلال اللاحقة خلفه. تفتح هذه القدرة على التراكب إمكانيات إبداعية هائلة.

/* ظل بطبقتين لعمق أكثر واقعية */
.card-realistic {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
}

/* ظل بثلاث طبقات -- عمق أكثر طبيعية */
.card-deep {
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.08);
}

/* الجمع بين الظلال الخارجية والداخلية */
.combined {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

/* تأثير توهج ملون متعدد الظلال */
.rainbow-glow {
    box-shadow:
        0 0 10px rgba(255, 0, 0, 0.3),
        0 0 20px rgba(255, 165, 0, 0.2),
        0 0 30px rgba(255, 255, 0, 0.1),
        0 0 40px rgba(0, 128, 0, 0.05);
}

/* تأثير حدود نيون بظلال انتشار متعددة */
.neon-border {
    box-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #0ff,
        0 0 40px #0ff,
        0 0 60px #0ff;
}

/* استخدام الانتشار لإنشاء "حدود" متعددة */
.multi-border {
    box-shadow:
        0 0 0 4px #3498db,
        0 0 0 8px #2ecc71,
        0 0 0 12px #e74c3c;
}

ارتفاع Material Design مع box-shadow

يُحدد نظام Material Design من Google خمسة مستويات من الارتفاع (عمق الظل)، كل منها يمثل مدى "ارتفاع" العنصر فوق سطح الصفحة. الارتفاع الأعلى يعني أن العنصر أكثر بروزًا ويلقي ظلًا أكبر وأكثر انتشارًا. فهم هذا النظام قيّم حتى لو لم تكن تبني تطبيق Material Design، لأن مفهوم الارتفاع يُترجم مباشرة إلى التسلسل البصري في أي تصميم.

/* الارتفاع 1 -- حالة الراحة: البطاقات، الأزرار */
.elevation-1 {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
}

/* الارتفاع 2 -- حالة الرفع: البطاقات عند التمرير، الأزرار العائمة */
.elevation-2 {
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.16),
        0 3px 6px rgba(0, 0, 0, 0.23);
}

/* الارتفاع 3 -- القائمة الفرعية، القائمة المنسدلة */
.elevation-3 {
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23);
}

/* الارتفاع 4 -- شريط التنقل، مربع الحوار */
.elevation-4 {
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
}

/* الارتفاع 5 -- النافذة المنبثقة، أعلى أولوية */
.elevation-5 {
    box-shadow:
        0 19px 38px rgba(0, 0, 0, 0.30),
        0 15px 12px rgba(0, 0, 0, 0.22);
}

/* ارتفاع تفاعلي -- البطاقة ترتفع عند التمرير */
.card-interactive {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
    transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-interactive:hover {
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
}

/* متغيرات CSS مخصصة لارتفاع متسق */
:root {
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --shadow-xl: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-lg); }

خاصية text-shadow

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

/* الصيغة */
text-shadow: offset-x offset-y blur-radius color;

/* ظل نص أساسي */
.shadow-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ظل نص حاد (بدون ضبابية) */
.sharp-shadow {
    text-shadow: 1px 1px 0px #333;
}

/* ظل نص خفيف لتحسين القراءة على خلفيات فاتحة */
.subtle-shadow {
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

/* نص فاتح على خلفية داكنة مع توهج */
.text-glow {
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* ظل نص ملون */
.colored-shadow {
    color: #333;
    text-shadow: 3px 3px 6px rgba(52, 152, 219, 0.5);
}

/* بدون ظل نص (إعادة تعيين) */
.no-shadow-text {
    text-shadow: none;
}

ظلال نص متعددة

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

/* ظل نص طبقي لعمق أكبر */
.deep-text-shadow {
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.2),
        2px 2px 4px rgba(0, 0, 0, 0.1),
        3px 3px 6px rgba(0, 0, 0, 0.05);
}

/* تأثير نص ثلاثي الأبعاد / ريترو */
.retro-3d {
    color: #e74c3c;
    text-shadow:
        1px 1px 0 #c0392b,
        2px 2px 0 #a93226,
        3px 3px 0 #922b21,
        4px 4px 0 #7b241c,
        5px 5px 0 #641e16;
}

/* تأثير نص محدد / بحد خارجي */
.text-outline {
    color: white;
    text-shadow:
        -1px -1px 0 #333,
         1px -1px 0 #333,
        -1px  1px 0 #333,
         1px  1px 0 #333;
}

/* ظل مزدوج لمظهر عتيق */
.vintage-text {
    color: #2c3e50;
    text-shadow:
        2px 2px 0 #ecf0f1,
        4px 4px 0 rgba(0, 0, 0, 0.1);
}

تأثيرات ظل النص الإبداعية

يمكن دمج ظلال النص بطرق إبداعية لإنتاج تأثيرات بصرية مذهلة. تُستخدم التقنيات التالية بشكل شائع في تصميم الويب لأقسام البطل والعناوين والشعارات والطباعة الفنية.

النص المنقوش البارز والغائر

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

/* نص منقوش بارز -- يبدو مرتفعًا (فاتح فوق، داكن تحت) */
.embossed {
    color: #ccc;
    background: #ccc;
    text-shadow:
        -1px -1px 1px rgba(255, 255, 255, 0.8),
         1px  1px 1px rgba(0, 0, 0, 0.3);
}

/* نص غائر / محفور -- يبدو مضغوطًا (داكن فوق، فاتح تحت) */
.debossed {
    color: #666;
    background: #888;
    text-shadow:
         1px  1px 1px rgba(255, 255, 255, 0.4),
        -1px -1px 1px rgba(0, 0, 0, 0.4);
}

/* تأثير الطباعة على خلفية داكنة */
.letterpress-dark {
    color: #222;
    background: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* تأثير الطباعة على خلفية فاتحة */
.letterpress-light {
    color: #ddd;
    background: #eee;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
}

نص التوهج النيوني

تأثيرات التوهج النيوني هي واحدة من أكثر الأشياء إثارة بصريًا يمكنك تحقيقها بظلال النص. من خلال تراكب ظلال متعددة مع قيم ضبابية متزايدة وألوان زاهية، يمكنك محاكاة مظهر لافتات النيون. يعمل هذا التأثير بشكل أفضل على الخلفيات الداكنة مع ألوان نص زاهية.

/* توهج نيوني كلاسيكي */
.neon-blue {
    color: #fff;
    text-shadow:
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #0fa,
        0 0 82px #0fa,
        0 0 92px #0fa,
        0 0 102px #0fa,
        0 0 151px #0fa;
    background: #111;
    font-family: cursive;
}

/* نيون وردي */
.neon-pink {
    color: #fff;
    text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff00de,
        0 0 40px #ff00de,
        0 0 80px #ff00de;
    background: #1a1a2e;
}

/* نيون خفيف لنص واجهة المستخدم */
.neon-subtle {
    color: #00d4ff;
    text-shadow:
        0 0 4px rgba(0, 212, 255, 0.6),
        0 0 8px rgba(0, 212, 255, 0.3);
}

/* حركة وميض النيون */
@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 4px #fff,
            0 0 11px #fff,
            0 0 19px #fff,
            0 0 40px #0fa,
            0 0 80px #0fa;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

.neon-flicker {
    animation: neon-flicker 1.5s infinite alternate;
}

تأثير نص النار

من خلال تراكب ظلال بألوان دافئة (أصفر، برتقالي، أحمر) مع إزاحات وقيم ضبابية متزايدة، يمكنك إنشاء وهم نص مشتعل بالنيران. المفتاح هو تكديس الألوان من الأصفر الفاتح قرب النص إلى الأحمر الداكن بعيدًا عنه.

/* نص ناري */
.fire-text {
    color: #fff;
    background: #000;
    text-shadow:
        0 -1px 4px #FFF,
        0 -2px 10px #ff0,
        0 -4px 20px #ff8000,
        0 -6px 30px #ff0000,
        0 -8px 40px #ff0000;
    font-size: 48px;
    font-weight: bold;
}

/* توهج دافئ خفيف (أكثر عملية لواجهة المستخدم) */
.warm-glow {
    color: #ff6b35;
    text-shadow:
        0 0 4px rgba(255, 107, 53, 0.4),
        0 0 8px rgba(255, 68, 0, 0.2);
}

اعتبارات أداء الظلال

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

كيف تؤثر الظلال على العرض: عندما يعرض المتصفح ظلًا، يجب أن يحسب شكل الظل، ويطبق ضبابية غاوسية (وهي مكلفة حسابيًا)، ويدمج طبقة الظل مع العنصر وبقية الصفحة، ويعيد رسم المنطقة المتأثرة كلما تغير العنصر. نصف قطر الضبابية هو المعامل الأكثر تكلفة -- قيم الضبابية الأكبر تتطلب حسابات أكثر.

/* بطيء: ضبابية كبيرة على عناصر كثيرة */
.card-slow {
    box-shadow: 0 10px 80px rgba(0, 0, 0, 0.3);
    /* ضبابية 80px مكلفة في الحساب */
}

/* سريع: ضبابية صغيرة مع طبقات متعددة */
.card-fast {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
    /* قيم ضبابية صغيرة أرخص بكثير */
}

/* أفضل: استخدم عنصرًا زائفًا للظلال المتحركة */
.card-optimized {
    position: relative;
}

.card-optimized::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.card-optimized:hover::after {
    opacity: 1;
    /* تحريك العتامة مُسرّع بواسطة GPU وأسرع بكثير
       من تحريك box-shadow مباشرة */
}

تصميمات CSS فقط مع الظلال

ظلال الصندوق ليست فقط للزخرفة -- يمكن استخدامها بشكل إبداعي لبناء تصميمات بصرية كاملة بدون عناصر HTML إضافية أو صور. لأنك تستطيع تراكب ظلال غير محدودة والتحكم في موقعها وحجمها ولونها بشكل مستقل، يمكن لعنصر واحد بظلال صندوق كثيرة إنشاء فن بكسل وأيقونات وأنماط والمزيد.

/* نقاط تحميل بعنصر واحد */
.loading-dots {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3498db;
    box-shadow:
        20px 0 0 #3498db,
        40px 0 0 #3498db;
    animation: loading 1.2s ease-in-out infinite;
}

/* خط سفلي بظلال لا يؤثر على التخطيط */
.fancy-underline {
    box-shadow: inset 0 -4px 0 0 #3498db;
    display: inline;
    padding-bottom: 2px;
}

/* حدود مزدوجة باستخدام الظلال (بدون HTML إضافي) */
.double-frame {
    border: 2px solid #333;
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 6px #333;
}

/* تأثير إطار الصورة */
.photo-frame {
    box-shadow:
        0 0 0 5px #fff,
        0 0 0 6px #ccc,
        0 0 0 15px #f5f0eb,
        0 0 0 16px #ccc,
        4px 4px 15px 16px rgba(0, 0, 0, 0.3);
}

النيومورفيزم (واجهة ناعمة) مع الظلال

النيومورفيزم (مزيج من "جديد" و "سكيومورفيزم") هو اتجاه تصميمي يستخدم ظلالًا مزدوجة -- واحدة فاتحة وواحدة داكنة -- على خلفية تتطابق مع لون خلفية العنصر، مما يُنشئ وهم أشكال ناعمة بارزة تبدو جزءًا من السطح نفسه. يعتمد هذا الأسلوب بشكل كبير على box-shadow ويتطلب إدارة دقيقة للألوان.

/* الإعداد الأساسي -- لون الخلفية يجب أن يتطابق */
.neumorphic-container {
    background: #e0e5ec;
}

/* عنصر نيومورفي بارز */
.neu-raised {
    background: #e0e5ec;
    border-radius: 16px;
    box-shadow:
         8px  8px 16px #b8bec7,
        -8px -8px 16px #ffffff;
}

/* عنصر نيومورفي مضغوط / غائر */
.neu-pressed {
    background: #e0e5ec;
    border-radius: 16px;
    box-shadow:
        inset  8px  8px 16px #b8bec7,
        inset -8px -8px 16px #ffffff;
}

/* زر نيومورفي */
.neu-button {
    background: #e0e5ec;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 16px;
    color: #6b7280;
    cursor: pointer;
    box-shadow:
         6px  6px 12px #b8bec7,
        -6px -6px 12px #ffffff;
    transition: all 0.2s ease;
}

.neu-button:hover {
    box-shadow:
         4px  4px  8px #b8bec7,
        -4px -4px  8px #ffffff;
}

.neu-button:active {
    box-shadow:
        inset 4px  4px  8px #b8bec7,
        inset -4px -4px  8px #ffffff;
}

/* حقل إدخال نيومورفي */
.neu-input {
    background: #e0e5ec;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 14px;
    color: #333;
    box-shadow:
        inset 3px  3px  6px #b8bec7,
        inset -3px -3px  6px #ffffff;
}

.neu-input:focus {
    outline: none;
    box-shadow:
        inset 3px  3px  6px #b8bec7,
        inset -3px -3px  6px #ffffff,
        0 0 0 2px rgba(52, 152, 219, 0.4);
}

/* بطاقة نيومورفية */
.neu-card {
    background: #e0e5ec;
    border-radius: 20px;
    padding: 30px;
    box-shadow:
         10px  10px 20px #b8bec7,
        -10px -10px 20px #ffffff;
}

/* صورة رمزية نيومورفية دائرية */
.neu-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e0e5ec;
    box-shadow:
         6px  6px 12px #b8bec7,
        -6px -6px 12px #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

أمثلة عملية: تجميع كل شيء

دعنا نجمع المفاهيم التي غطيناها في مكونات كاملة جاهزة للإنتاج تُظهر استخدام الظلال في العالم الحقيقي.

<!-- HTML -->
<div class="shadow-card">
    <div class="shadow-card__image">
        <img src="photo.jpg" alt="صورة البطاقة">
    </div>
    <div class="shadow-card__body">
        <h3>عنوان البطاقة</h3>
        <p>نص وصف البطاقة يوضع هنا.</p>
        <button class="shadow-card__btn">اعرف المزيد</button>
    </div>
</div>

/* CSS */
.shadow-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shadow-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.12),
        0 6px 12px rgba(0, 0, 0, 0.08);
}

.shadow-card__image img {
    width: 100%;
    display: block;
}

.shadow-card__body {
    padding: 20px;
}

.shadow-card__btn {
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.4);
    transition: box-shadow 0.2s ease;
}

.shadow-card__btn:hover {
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.5);
}

.shadow-card__btn:active {
    box-shadow: 0 1px 2px rgba(52, 152, 219, 0.4);
    transform: translateY(1px);
}

/* طبقة تراكب النافذة المنبثقة */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* صندوق النافذة المنبثقة بظل عميق */
.modal-box {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 500px;
    width: 90%;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 12px 24px rgba(0, 0, 0, 0.15);
}

/* زر الإجراء العائم (FAB) */
.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e74c3c;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    position: fixed;
    bottom: 24px;
    right: 24px;
    box-shadow:
        0 4px 8px rgba(231, 76, 60, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.fab:hover {
    transform: scale(1.05);
    box-shadow:
        0 8px 16px rgba(231, 76, 60, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.2);
}

/* عنوان بطل مع خلفية صورة */
.hero-heading {
    font-size: 64px;
    font-weight: 900;
    color: white;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

/* ظل عنوان خفيف للصفحات العادية */
.page-heading {
    font-size: 36px;
    font-weight: 700;
    color: #2c3e50;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* تأثير نص الظل الطويل */
.long-shadow-text {
    color: #e74c3c;
    font-size: 72px;
    font-weight: bold;
    text-shadow:
        1px 1px 0 rgba(0,0,0,0.1),
        2px 2px 0 rgba(0,0,0,0.1),
        3px 3px 0 rgba(0,0,0,0.1),
        4px 4px 0 rgba(0,0,0,0.1),
        5px 5px 0 rgba(0,0,0,0.1),
        6px 6px 0 rgba(0,0,0,0.1),
        7px 7px 0 rgba(0,0,0,0.1),
        8px 8px 0 rgba(0,0,0,0.1);
}