مولد ظل الصندوق CSS

CSS box-shadow هي خاصية CSS تضيف تأثيرات الظل حول إطار العنصر. تتيح لك إنشاء ظلال منسدلة وظلال داخلية وطبقات ظل متعددة من خلال تحديد الإزاحة ونصف قطر الضبابية ونصف قطر الانتشار وقيم اللون.

تقبل خاصية box-shadow عدة قيم: الإزاحة الأفقية (X)، الإزاحة العمودية (Y)، نصف قطر الضبابية، نصف قطر الانتشار، اللون وكلمة inset الاختيارية. يمكنك أيضًا تحديد ظلال متعددة مفصولة بفواصل.

تغير كلمة inset المفتاحية الظل من ظل خارجي (ظل منسدل) إلى ظل داخلي. عند تحديد inset، يتم رسم الظل داخل حدود العنصر بدلاً من خارجه، مما يخلق تأثيرًا داخليًا.

يحدد نصف قطر الضبابية مقدار ضبابية حافة الظل. قيمة 0 تخلق حافة حادة وصلبة. القيم الأكبر تخلق ظلًا أكثر انتشارًا ونعومة يمتد أبعد من العنصر.

يوسع نصف قطر الانتشار أو يقلص حجم الظل. القيم الموجبة تجعل الظل أكبر من العنصر، بينما القيم السالبة تجعله أصغر. يؤثر هذا على الظل قبل تطبيق الضبابية.

يمكنك إنشاء ظلال متعددة عن طريق فصل كل تعريف ظل بفاصلة. يمكن أن يكون لكل ظل قيم إزاحة وضبابية وانتشار ولون مختلفة. تُطبق الظلال بالترتيب الذي تُعلن به، حيث يكون الظل الأول في الأعلى.

نعم، يمكنك استخدام أي تنسيق ألوان CSS بما في ذلك RGBA وHSLA وHEX أو الألوان المسماة. RGBA وHSLA مفيدان بشكل خاص لإنشاء ظلال شبه شفافة تمتزج بشكل طبيعي مع الخلفيات.

ببساطة انقر على زر "نسخ الكود" في واجهة المولد. سيتم نسخ كود CSS إلى الحافظة ويمكن لصقه مباشرة في ورقة الأنماط أو ملف HTML.

نعم، box-shadow مدعوم في جميع المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وEdge وOpera. كان جزءًا من CSS3 منذ عام 2011 ويتمتع بتوافق ممتاز مع المتصفحات.

لدى box-shadow تأثير ضئيل على الأداء في المتصفحات الحديثة. ومع ذلك، فإن استخدام ظلال معقدة متعددة بنصف قطر ضبابية كبير على العديد من العناصر يمكن أن يؤثر على أداء العرض، خاصة على الأجهزة المحمولة.

تشمل الاستخدامات الشائعة إنشاء تأثيرات ارتفاع البطاقات، وإضافة عمق للأزرار، وإنشاء حقول نموذج داخلة، وتنفيذ ظلال تصميم المواد، وإضافة فصل بصري بين العناصر المتداخلة.

نعم، يمكن تحريك box-shadow باستخدام انتقالات أو رسوميات CSS. ومع ذلك، قد يكون تحريك box-shadow مكثفًا من حيث الأداء. للحصول على أداء أفضل، فكر في استخدام العناصر الزائفة مع انتقالات الشفافية بدلاً من ذلك.