مولّد ظل الصندوق في CSS

ما هي مولّد ظل الصندوق في CSS؟

مولّد ظل الصندوق في CSS هو محرر بصري مجاني لخاصية box-shadow في CSS، مصمم لمطوري الواجهات الأمامية والمصممين. أضف طبقة ظل واحدة أو أكثر واضبط لكل طبقة offset-x وoffset-y ونصف قطر التمويه ونصف قطر الانتشار واللون وخيار inset عبر حقول أرقام بسيطة ومنتقي ألوان. يعرض مربع معاينة مباشر على خلفية رقعة شطرنج النتيجة المدمجة في الوقت الفعلي، ويُولَّد لك إعلان box-shadow الكامل — مع فصل كل طبقة بفاصلة — لنسخه. استخدمه لصنع ظلال ارتفاع ناعمة، أو نيومورفيزم حاد، أو تأثيرات توهج، أو عمق متعدد الطبقات بأسلوب Material دون حفظ ترتيب القيم.

كيفية استخدام مولّد ظل الصندوق في CSS

1. اضبط offset-x وoffset-y للطبقة الأولى (بالـ px) لتحريك الظل أفقيًا ورأسيًا؛ القيم السالبة تحركه يسارًا أو لأعلى.
2. اضبط نصف قطر التمويه (مدى نعومة الظل) ونصف قطر الانتشار (مدى نموه أو انكماشه).
3. اختر لونًا بالعينة أو اكتب قيمة ست عشرية — قيمة ست عشرية من 8 أرقام مثل #00000040 تضبط شفافية الظل.
4. حدّد مربع inset لرسم الظل داخل العنصر بدلًا من خارجه.
5. انقر على إضافة طبقة لتكديس ظل آخر فوقه، ثم أعد الترتيب بتعديل القيم؛ احذف أي طبقة بزر سلة المهملات الخاص بها.
6. راقب تحديث المعاينة، ثم انسخ CSS لـ box-shadow المُولَّد إلى ورقة الأنماط لديك.

أمثلة

x 0, y 4, تمويه 12, انتشار 0, لون #00000040

box-shadow: 0px 4px 12px 0px #00000040;

الطبقة 1: 0 1 2 0 #0000001a · الطبقة 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset محدد, x 0, y 2, تمويه 6, انتشار 0, لون #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

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

ما ترتيب قيم box-shadow؟

تُكتب كل طبقة بالصيغة offset-x وoffset-y ونصف قطر التمويه ونصف قطر الانتشار واللون، مع كلمة inset اختيارية أمامها. تُخرج هذه الأداة دائمًا الأطوال الأربعة بالـ px (offset-x وoffset-y والتمويه والانتشار) فيكون الترتيب واضحًا لا لبس فيه وسهل التعديل يدويًا لاحقًا.

هل يمكنني إضافة ظل شبه شفاف أو ملوّن؟

نعم. اكتب أي لون CSS في حقل اللون — قيمة ست عشرية كاملة من 8 أرقام مثل #00000040 (الرقمان الأخيران هما قناة ألفا) تعطي ظلًا شبه شفاف، ويمكنك استخدام الألوان المسماة أو أي قيمة ست عشرية. تتعامل عينة المنتقي مع الألوان الصلبة #rrggbb؛ ولأجل ألفا، حرّر حقل النص.

كيف أكدّس عدة ظلال؟

انقر على إضافة طبقة لكل ظل إضافي. يفصل CSS المُولَّد كل طبقة بفاصلة بالترتيب، من الأعلى إلى الأسفل — تُرسم الطبقة الأولى أخيرًا (في الأعلى). استخدم هذا للعمق متعدد الطبقات بأسلوب Material أو لدمج توهج خارجي مع إبراز inset.

ماذا يفعل مربع inset؟

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

هل تُرفَع بياناتي إلى أي مكان؟

لا. يعمل المولّد بالكامل في متصفحك باستخدام JavaScript — لا تُرسَل ألوانك وقيمك إلى أي خادم أبدًا، فيعمل بخصوصية وحتى دون اتصال بعد تحميل الصفحة.