مولّد ظل الصندوق CSS (box-shadow)
أنشئ box-shadow بتحريك المنزلقات ومشاهدة النتيجة على بطاقة. كدّس حتى ست طبقات لظلال أنعم وأكثر واقعية، واستخدم inset لتأثير الضغط، وابدأ من قوالب مثل ناعم وعائم ومتوهج والنيومورفيزم. انسخ CSS بنقرة واحدة.
طريقة الاستعمال
- اختر قالبًا جاهزًا أو اضبط إزاحة الظل وتمويهه وانتشاره ولونه وشفافيته.
- أضف طبقات بالزر + وحدد كل طبقة لتعديلها؛ غيّر الخلفية ولون الصندوق ونصف قطر الزوايا ليناسب تصميمك.
- انسخ كود CSS والصقه في قاعدة العنصر.
الأسئلة الشائعة
ماذا يفعل التمويه والانتشار؟
التمويه يجعل حافة الظل أنعم؛ والصفر يعطي حافة حادة. الانتشار يكبّر الظل في كل الاتجاهات قبل التمويه، والانتشار السالب يصغّره، مما يساعد الظل الكبير المموّه على البقاء تحت العنصر.
لماذا نستخدم عدة طبقات للظل؟
الظلال الحقيقية أغمق قرب الجسم وتتلاشى كلما ابتعدت. الجمع بين ظل صغير حاد وظل أكبر وأنعم يحاكي ذلك ويبدو أكثر طبيعية من ظل واحد. الطبقة الأولى في القائمة تُرسم في الأعلى.
هل يبطّئ box-shadow الصفحة؟
ليس في الاستخدام العادي. التمويه الكبير جدًا على عناصر كثيرة، أو تحريك الظل نفسه، قد يؤثر في الأداء على الهواتف البطيئة؛ وللتحريك غيّر شفافية عنصر زائف (pseudo-element) يحمل الظل بدلًا من ذلك.
🏷️ مولّد الميتا تاغ (Meta Tags)
🖼️ مولّد Open Graph
🔗 منشئ روابط UTM
🌈 مولّد تدرجات CSS