ابنِ الظل طبقة بعد طبقة
يكتب مولد الظلال هذا خاصية CSS <code>box-shadow</code> نيابةً عنك. كدّس ما تحتاجه من طبقات الظل، واضبط لكل طبقة الإزاحة الأفقية والعمودية والتمويه والانتشار واللون والشفافية، وحوّلها إلى ظل داخلي (inset)، وشاهد صندوق المعاينة يتحدّث فوق أي خلفية. ابدأ من إعدادات جاهزة للظلال الناعمة، والارتفاع بأسلوب Material، والـ neumorphism، والإزاحات الحادة، والتوهج، ثم انسخ كود CSS أو فئة Tailwind <code>shadow-[…]</code>. الصق ظلًا موجودًا لتعدّله. كل شيء يعمل في متصفحك.
كيف تنشئ ظل CSS box-shadow
- 1اختر إعدادًا جاهزًا قريبًا مما تريد، أو احتفظ بالظل متعدد الطبقات الافتراضي.
- 2اختر طبقة واضبط الإزاحة X وY والتمويه والانتشار واللون والشفافية. فعّل Inset لرسم الظل داخل الصندوق.
- 3استخدم إضافة طبقة والنسخ وإعادة الترتيب والإخفاء لدمج عدة ظلال.
- 4غيّر خلفية المعاينة ولون الصندوق ونصف قطر الزوايا والحجم ليناسب تصميمك.
- 5انسخ CSS أو فئة Tailwind.
شرح قيم box-shadow
- الإزاحة X وY
- مقدار تحريك الظل إلى اليمين وإلى الأسفل. القيم السالبة تحرّكه إلى اليسار وإلى الأعلى. مصدر الضوء فوق الصفحة يعني إزاحة Y موجبة.
- نصف قطر التمويه
- مدى نعومة الحافة. القيمة 0 تعطي نسخة حادة من الصندوق، والقيم الأكبر تنشر الظل على مساحة أوسع وأخفت. لا يمكن أن يكون سالبًا.
- نصف قطر الانتشار
- يكبّر الظل أو يصغّره قبل تمويهه. الانتشار السالب مع تمويه كبير يمنع الظل الناعم من الظهور على الجانبين، وهذه هي الحيلة وراء معظم الظلال "الناعمة".
- اللون
- عادةً أسود أو درجة داكنة من لون الخلفية بشفافية منخفضة. تلوين الظل بلون الخلفية يبدو أكثر طبيعية من الرمادي الصرف.
- inset
- يرسم الظل داخل الإطار بدلًا من خارجه، فيبدو الصندوق مضغوطًا للداخل. يمكن الجمع بين الظلال الداخلية والخارجية في تعريف واحد.
لماذا تكديس عدة ظلال؟
للظلال الحقيقية نواة داكنة ومركّزة حيث يكاد الجسم يلامس السطح، وظل جزئي ناعم وواسع أبعد منها. طبقة box-shadow واحدة لا ترسم إلا أحدهما. تكديس طبقتين إلى خمس طبقات تتضاعف إزاحتها وتمويهها في كل مرة، وكلها بشفافية منخفضة، يمنح العمق الناعم والواقعي الذي تستخدمه أنظمة التصميم الحديثة. وهذا بالضبط ما يفعله الإعداد طبقات ناعمة.
تُرسم الطبقات من الأمام إلى الخلف: أول طبقة في القائمة تكون في الأعلى. أعد ترتيبها بأزرار الأسهم، وأخفِ طبقة بأيقونة العين لترى ما تضيفه. الطبقات المخفية لا تُضمَّن في كود CSS المنسوخ.
الارتفاع والـ neumorphism وأنماط أخرى
تتبع إعدادات الارتفاع 1–5 ظلال البطاقات الكلاسيكية في Material Design: كل مستوى يجمع ظلًا محيطيًا مع ظل رئيسي، فيرفع البطاقة أكثر عن الصفحة.
يستخدم Neumorphism ظلين على صندوق بلون خلفيته نفسه: ظل داكن مُزاح إلى الأسفل واليمين، وظل فاتح مُزاح إلى الأعلى واليسار. لا ينجح ذلك إلا عندما يتطابق لونا الصندوق والخلفية، ولذلك يضبط الإعداد الجاهز كليهما. أما الإزاحة الحادة فتلغي التمويه تمامًا لمظهر مسطح على طريقة الـ brutalism، ويستخدم التوهج إزاحة صفرية مع ظل ملوّن لحلقات التركيز وتأثيرات النيون على الخلفيات الداكنة.
الظلال في Tailwind CSS
تغطي فئات Tailwind المدمجة من shadow-sm إلى shadow-2xl الحالات الشائعة. ولأي شيء آخر يكتب المولد قيمة اعتباطية مثل shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]: تتحول المسافات إلى شرطات سفلية لأن أسماء الفئات لا يمكن أن تحتوي على مسافات، وتعمل الفئة في Tailwind 3 و4 دون تعديل الإعدادات.
اجمع الظل مع خلفية من مولد تدرج CSS، أو تحقق من أن النص على بطاقتك يبقى مقروءًا باستخدام مدقق التباين.
الظلال والأداء
تُرسم أنصاف أقطار التمويه الكبيرة بواسطة وحدة معالجة الرسومات في جميع المتصفحات الحالية، وتكلفتها قليلة على العناصر الثابتة. لكن تحريك box-shadow يعيد رسم العنصر في كل إطار؛ لتحريك العمق عند التمرير، ضع الظل الأكبر على عنصر زائف (pseudo-element) وحرّك خاصية opacity الخاصة به بدلًا من ذلك.
الأسئلة الشائعة
- ما صيغة box-shadow؟
- box-shadow: [inset] offset-x offset-y [blur] [spread] color;. الإزاحتان فقط إلزاميتان. افصل بين الظلال المتعددة بفواصل، مثل box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- كيف أصنع ظلًا ناعمًا وخفيفًا؟
- استخدم لونًا أسود بشفافية منخفضة (10–20%) وتمويهًا كبيرًا وإزاحة Y صغيرة وانتشارًا سالبًا، مثل 0 10px 30px -5px rgba(0,0,0,0.15). وتكديس ظلين أو ثلاثة من هذا النوع يبدو أنعم.
- كيف أضع ظلًا على جانب واحد فقط؟
- أزِح الظل نحو ذلك الجانب واستخدم انتشارًا سالبًا بحجم التمويه تقريبًا حتى لا يظهر على الجوانب الأخرى، مثل 0 8px 6px -6px rgba(0,0,0,0.3) لظل في الأسفل فقط.
- ماذا تفعل inset؟
- ترسم inset الظل داخل الصندوق بدلًا من خلفه، فيبدو العنصر مضغوطًا داخل الصفحة. وهي شائعة في حقول الإدخال والأزرار المضغوطة.
- ما الفرق بين box-shadow وdrop-shadow؟
- يتبع box-shadow صندوق العنصر ونصف قطر زواياه. أما الدالة filter: drop-shadow() فتتبع البكسلات المرئية فعلًا، مثل حدود صورة PNG شفافة أو أيقونة SVG، لكنها بلا انتشار ولا inset.
- كيف أستخدم ظلًا مخصصًا في Tailwind؟
- انسخ فئة Tailwind من المولد، وهي قيمة اعتباطية مثل shadow-[0_4px_12px_rgba(0,0,0,0.15)]، وأضفها إلى العنصر. ويمكنك أيضًا وضع قيمة CSS في إعدادات boxShadow في السمة لتمنحها اسمًا.
- هل يمكنني تعديل ظل لديّ بالفعل؟
- نعم. الصق قيمة box-shadow أو تعريفًا كاملًا أو فئة Tailwind shadow-[…] في خانة الاستيراد. تُحوَّل الأطوال بوحدتي rem وem على أساس 16px.
- هل يُرسَل كود CSS الخاص بي إلى أي مكان؟
- لا. يعمل المولد بالكامل في متصفحك.