Utilore

مولّد ظلال CSS

حرّك المؤشّرات فتتغيّر العيّنة معها. راكِم الطبقات حين لا يكفي ظل واحد — هكذا يتكوّن العمق الناعم المقنع في الواجهات المتقنة.

الطبقات

إعدادات جاهزة

طريقة الاستخدام

  1. اختر ما تريد إظلاله: صندوقًا أم نصًّا.
  2. اضبط الإزاحة والتمويه واللون — تُعاد العيّنة رسمًا فورًا.
  3. أضف طبقة إن أردت عمقًا: ظلّان أو ثلاثة خفيفة أفضل من ظل ثقيل واحد.
  4. انسخ سطر CSS أسفل عناصر الضبط.

معلومات مفيدة

لماذا لظل النص إعدادات أقل

لا تقبل الخاصية ‎text-shadow‎ سوى الإزاحة والتمويه واللون. أمّا الامتداد والوضع الداخلي فهما لـ‎box-shadow‎ وحدها، وقيمة زائدة واحدة تُبطل التصريح كلّه: يتجاهله المتصفّح بصمت فيختفي الظل تمامًا. لذلك يُخفي وضعُ النص هذين المؤشّرين بدل الرهان على أن يُتجاوَزا.

طبقات خفيفة عدّة خير من طبقة ثقيلة

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

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

ما فائدة الامتداد؟

يكبّر الظل أو يصغّره قبل تطبيق التمويه. القيمة السالبة تسحب الظل إلى الداخل كي لا يبرز من الجانبين — وهذه حيلة الظلال الأنيقة في البطاقات، حيث ينبغي أن يبقى التوهّج تحت الصندوق لا حوله.

كيف أصنع ظلًّا داخليًا؟

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

لماذا لا يظهر ظلّي؟

غالبًا لأن العتامة صفر، أو لأن الإزاحة والتمويه صفران معًا فيختبئ الظل خلف الصندوق تمامًا. ويختفي كذلك إن كان العنصر الأب يحمل ‎overflow: hidden‎ ووقع الظل خارج المساحة الظاهرة.

هل يعمل في كل المتصفّحات؟

نعم. أصبحت ‎box-shadow‎ و‎text-shadow‎ معيارًا منذ سنوات ولا تحتاجان بادئات؛ والقيم الخارجة من هنا هي CSS عادي بلا امتدادات خاصة.

أدوات ذات صلة