مولّد ظلال الصندوق (box-shadow)

ما مولّد box-shadow والزرّ؟#

box-shadow هي قاعدة CSS التي ترسم ظلًّا مُسقِطًا خلف عنصر. على الرغم من الاسم، فهي تفعل أكثر من الظلال: مُطبَّقة طبقات بشكل صحيح تُنتج الارتفاع الناعم الذي يجعل بطاقات وأزرار واجهة المستخدم الحديثة تبدو ماديّة، ويمكنها نحت أخدود داخليّ لحالة «مضغوط»، ويمكنها محاكاة توهّج ملوّن حول حقل إدخال مركَّز. المشكلة أنّ ضبط ظلّ صحيح واحد يعني إدارة خمس قيم لكلّ طبقة (إزاحة X، إزاحة Y، تمويه، انتشار، لون) بالإضافة إلى كلمة inset اختياريّة — ومعظم الأزرار الحقيقية تُركّب طبقتين أو ثلاث، فتنتهي بضبط عشرة إلى خمسة عشر عددًا يدويًّا.

تُزيل هذه الصفحة الحساب. تُركِّب طبقات الظلّ وتُدقِّق نصف قطر الزرّ وحدّه وحشوه وألوانه في الشريط الجانبيّ؛ تُظهر اللوحة اليمنى زرًّا حيًّا مع الظلّ المطبَّق، وتكتب كلًّا من قاعدة CSS للزرّ .btn وعنصر <button> HTML المطابق، جاهزَين للّصق. الافتراضيّ الذي تراه عند التحميل هو الزرّ المرتفع ذو الطبقتين المألوف المستخدم عبر أنظمة التصميم الحديثة — نقطة انطلاق جيّدة تُنحِّها نحو علامتك الخاصّة.

كيف تستخدمها#

يحمل الشريط الجانبيّ الضوابط؛ وتحمل اللوحة اليمنى المعاينة، وناتج CSS، وناتج HTML.

1. ابنِ الظلّ. تحت الظلال، انقر إضافة طبقة لتركيب طبقة جديدة. لكلّ طبقة ستّ ضوابط:
   • إزاحة X / إزاحة Y — كم يتحوّل الظلّ يمينًا/أسفلًا (السالب يذهب يسارًا/أعلى). 0/0 يُوسِّطه، فيُنتج توهّجًا متّسقًا.
   • التمويه — كم هي ناعمة الحافة. 0 نسخة صلبة مسطّحة؛ القيم الكبيرة تُبدّده. لا يمكن للتمويه أن يكون سالبًا في CSS.
   • الانتشار — يُنمّي أو يُقلِّص بصمة الظلّ. الانتشار السالب يُضيِّق تمويهًا عريضًا إلى حافة ضيّقة مُقنِعة.
   • اللون — لون سداسي عشريّ. استخدم قناة ألفا (hex بثمانية أرقام مثل #00000033) لجعل الظلّ شبه شفّاف؛ الألوان المعتمة تمامًا تُعرَض كـ #RRGGBB مصمت.
   • داخلية — اقلبها لرسم الظلّ داخل العنصر (مظهر مضغوط، منحوت) بدلًا من خلفه.
   • تحريك لأعلى / تحريك لأسفل / حذف يُعيد ترتيب الطبقات أو يُزيلها. الطبقة الأولى في القائمة تُرسم في الأعلى؛ الأخيرة تجلس أبعد للخلف.
2. نمِّط الزرّ. تحت زرّ، اضبط نصّ التسمية، ثمّ نصف القطر، وعرض الحد، ولون الحد، والحشو Y / X، ولون الخلفية، ولون النصّ. تقترن حقول الألوان بصندوق نصّ hex مع منتقي ألوان أصليّ.
3. انسخ ما تحتاجه. نسخ بجانب CSS يأخذ قاعدة .btn الكاملة؛ نسخ بجانب HTML يأخذ عنصر <button>. ضبط عرض الحدّ على 0 يُنهار الحدّ إلى border: none;.

أبرز المزايا#

• طبقات متعدّدة، بالترتيب. الظلّ المُقنِع تقريبًا دائمًا طبقتان أو ثلاث — حافة داكنة ضيّقة قريبة من العنصر وغسلة أنعم أخفّ أبعد. تستطيع تركيب وإعادة ترتيب ما شئت.
• تسلسل ألوان يدرك ألفا. اللون المعتم تمامًا يُصدَر كـ #RRGGBB نظيف؛ للحظة تضيف الشفافية يبدّل إلى rgba(r, g, b, a) بألفا مُقتطَعة — الأشكال التي تستخدمها ملفات الأنماط فعلًا.
• الزرّ كله في قاعدة واحدة. نصف القطر، والحدّ، والحشو، والخلفية، ولون النصّ، والظلّ كلّها تُصدَر في كتلة .btn واحدة، فلصقة واحدة تُنمِّق العنصر بالكامل.
• HTML مطابق. ناتج HTML هو ببساطة <button class="btn">Label</button>، مع هروب HTML للتسمية — حتى التسمية المليئة بـ < أو & آمنة للّصق.
• معاينة حيّة مُثبَّتة من اليسار إلى اليمين. إزاحة X الموجبة دائمًا تُحرِّك الظلّ يمينًا، فتُجبَر المعاينة على LTR بصرف النظر عن لغة الصفحة.

مثال عملي#

تُحمَّل الصفحة بزرّ نيليّ مرتفع جاهز. ظلّه طبقتان: حافة انتشار -1px ضيّقة تُحكم الزرّ، وغسلة أبعد أوسع أخفّ. CSS المُولَّد بالضبط:

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

لاحظ الطبقتين تعملان معًا: الأولى (4px 6px تمويه، -1px انتشار، 0.2 ألفا) تُعرِّف حافة التماس الحادّة؛ الثانية (10px 15px تمويه، -3px انتشار، 0.102 ألفا) تُوفّر الارتفاع المحيطيّ. أنزل الألفا فيتحوّل الظلّ إلى ختم أسود مسطّح؛ ارفع الانتشار فيبدو الزرّ كأنّه يطفو مرتفعًا أكثر من اللازم.

لحالة مضغوطة، امسح تلك الطبقات وأضف واحدة مفردة: داخلية مُفعَّلة، إزاحة 0/2، تمويه 4، انتشار 0، لون #00000033. يصبح الناتج inset 0 2px 4px rgba(0, 0, 0, 0.2) — يبدو العنصر الآن وكأنّه غارق في السطح، مثاليّ لنمط :active.

الأسئلة الشائعة#

لماذا يخرج اللون كـ rgba(...) عندما كتبت hex؟#

عندما يكون لـ hex الخاصّك قناة ألفا (ثمانية أرقام، مثل #00000033)، تُسلسِله الأداة كـ rgba(r, g, b, a) لأنّه الشكل الذي تحلِّله موثوقًا معظم أدوات CSS والمتصفّحات القديمة. اللون المعتم تمامًّا — بلا ألفا، أو ألفا FF — يبقى كـ #RRGGBB المُدمج. كلاهما يُعرَض مطابقًا لما ضبطته؛ الأمر يتعلّق فقط بأيّ تدوين أنسب اتجاهًا للنقل.

بأيّ ترتيب تُرسم الطبقات؟#

الطبقة الأولى في القائمة تُرسم في الأعلى، والأخيرة في الأسفل. لارتفاع طبيعيّ، ضع الطبقة الحادّة الداكنة القريبة أولًا والطبقة الناعمة الخفيفة البعيدة ثانيًا — بهذه الطريقة لا تُخنَق حافة التماس الحادّة بالغسلة المحيطيّة. أعد الترتيب بـ تحريك لأعلى / تحريك لأسفل حتى تُقرأ المعاينة صحيحة.

تمويه أم انتشار — ما الفرق؟#

التمويه يُنعِّم حافة الظلّ (تدرّج من اللون الكامل إلى الشفّاف). الانتشار يُنمّي أو يُقلِّل الظلّ كله بمقدار ثابت قبل تطبيق التمويه — الانتشار الموجب يجعله أكبر وأكثر صلابة، والانتشار السالب يقتات منه وهو سرّ الحافة الضيّقة الاحترافيّة على طبقة تمويه عريضة. خطأ شائع هو اللجوء إلى التمويه وحده والحصول على سحابة منتفخة؛ إضافة -2px أو -3px من الانتشار يُعيدها إلى شكلها.

هل أستطيع استخدام هذا الظلّ على div لا زرّ؟#

نعم. تعمل CSS على أيّ عنصر يقبل box-shadow — انسخ سطر box-shadow: فقط (أو القاعدة كاملة المُعاد تسميتها إلى مُحدِّدك) وأسقط تصريحات الزرّ الخاصة التي لا تحتاجها. ناتج HTML ذو صلة فقط عندما تريد فعلًا <button>.