مولد ظل الصندوق CSS
مولد ظل الصندوق CSS مجاني عبر الإنترنت. أنشئ ظلالاً جميلة بصريًا مع إزاحة وضبابية وانتشار ولون وظل داخلي قابلة للتعديل. معاينة مباشرة ونسخ فوري للكود.
ما هو CSS box-shadow؟
CSS box-shadow هي خاصية CSS تضيف تأثيرات الظل حول إطار العنصر. تتيح لك إنشاء ظلال منسدلة وظلال داخلية وطبقات ظل متعددة من خلال تحديد الإزاحة ونصف قطر الضبابية ونصف قطر الانتشار وقيم اللون.
ما هي معاملات box-shadow؟
تقبل خاصية box-shadow عدة قيم: الإزاحة الأفقية (X)، الإزاحة العمودية (Y)، نصف قطر الضبابية، نصف قطر الانتشار، اللون وكلمة inset الاختيارية. يمكنك أيضًا تحديد ظلال متعددة مفصولة بفواصل.
ما هي الكلمة المفتاحية inset؟
تغير كلمة inset المفتاحية الظل من ظل خارجي (ظل منسدل) إلى ظل داخلي. عند تحديد inset، يتم رسم الظل داخل حدود العنصر بدلاً من خارجه، مما يخلق تأثيرًا داخليًا.
ما هو نصف قطر الضبابية؟
يحدد نصف قطر الضبابية مقدار ضبابية حافة الظل. قيمة 0 تخلق حافة حادة وصلبة. القيم الأكبر تخلق ظلًا أكثر انتشارًا ونعومة يمتد أبعد من العنصر.
ما هو نصف قطر الانتشار؟
يوسع نصف قطر الانتشار أو يقلص حجم الظل. القيم الموجبة تجعل الظل أكبر من العنصر، بينما القيم السالبة تجعله أصغر. يؤثر هذا على الظل قبل تطبيق الضبابية.
كيف أنشئ ظلالاً متعددة؟
يمكنك إنشاء ظلال متعددة عن طريق فصل كل تعريف ظل بفاصلة. يمكن أن يكون لكل ظل قيم إزاحة وضبابية وانتشار ولون مختلفة. تُطبق الظلال بالترتيب الذي تُعلن به، حيث يكون الظل الأول في الأعلى.
هل يمكنني استخدام ألوان RGBA للظلال؟
نعم، يمكنك استخدام أي تنسيق ألوان CSS بما في ذلك RGBA وHSLA وHEX أو الألوان المسماة. RGBA وHSLA مفيدان بشكل خاص لإنشاء ظلال شبه شفافة تمتزج بشكل طبيعي مع الخلفيات.
كيف أنسخ كود CSS المُنشأ؟
ببساطة انقر على زر "نسخ الكود" في واجهة المولد. سيتم نسخ كود CSS إلى الحافظة ويمكن لصقه مباشرة في ورقة الأنماط أو ملف HTML.
هل box-shadow مدعوم في جميع المتصفحات؟
نعم، box-shadow مدعوم في جميع المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وEdge وOpera. كان جزءًا من CSS3 منذ عام 2011 ويتمتع بتوافق ممتاز مع المتصفحات.
هل يؤثر box-shadow على الأداء؟
لدى box-shadow تأثير ضئيل على الأداء في المتصفحات الحديثة. ومع ذلك، فإن استخدام ظلال معقدة متعددة بنصف قطر ضبابية كبير على العديد من العناصر يمكن أن يؤثر على أداء العرض، خاصة على الأجهزة المحمولة.
ما هي حالات الاستخدام الشائعة لـ box-shadow؟
تشمل الاستخدامات الشائعة إنشاء تأثيرات ارتفاع البطاقات، وإضافة عمق للأزرار، وإنشاء حقول نموذج داخلة، وتنفيذ ظلال تصميم المواد، وإضافة فصل بصري بين العناصر المتداخلة.
هل يمكنني تحريك box-shadow؟
نعم، يمكن تحريك box-shadow باستخدام انتقالات أو رسوميات CSS. ومع ذلك، قد يكون تحريك box-shadow مكثفًا من حيث الأداء. للحصول على أداء أفضل، فكر في استخدام العناصر الزائفة مع انتقالات الشفافية بدلاً من ذلك.
كيفية استخدام مولد ظل الصندوق CSS
صمّم ظلال CSS box-shadow بصريًا بدلًا من تخمين القيم. يعمل المولّد محليًا داخل متصفحك ولا يُرفع أي شيء تكتبه.
- اضبط H-Offset و V-Offset لتحريك الظل أفقيًا ورأسيًا.
- زد قيمة Blur لتلطيف الحواف، وعدّل Spread لتكبير الظل أو تصغيره.
- اختر Color واضبط Opacity للحصول على ظل أنعم وأكثر واقعية.
- فعّل خيار Inset لرسم الظل داخل العنصر بدلًا من خارجه.
- انسخ قاعدة box-shadow الجاهزة من المعاينة إلى ورقة الأنماط.
ضباب صغير مع قيمة موجبة صغيرة في V-Offset يمنحك ظل تماس خفيفًا وواقعيًا أسفل العنصر مباشرة.
أدوات ذات صلة
- مولد Border Radius CSS مولد border-radius CSS مرئي. اضبط كل زاوية بشكل مستقل مع معاينة فورية وانسخ كود CSS مباشرة.
- مولد تدرجات CSS أنشئ تدرجات CSS مذهلة بصريًا. أنشئ تدرجات خطية وشعاعية ومخروطية مع نقاط ألوان متعددة وزوايا ومواضع مخصصة. انسخ كود CSS الجاهز للإنتاج فورًا.
- مولد CSS Grid مولد CSS Grid مرئي مجاني مع معاينة مباشرة. صمم تخطيطات شبكية متجاوبة بشكل تفاعلي وصدّر كود CSS جاهز للإنتاج فوراً.
- مولد CSS Flexbox مولد CSS Flexbox مرئي مع معاينة مباشرة. اضبط خصائص flex واحصل على كود CSS جاهز للاستخدام.
- مولد الحواف الدائرية الإبداعية مولد حواف دائرية إبداعي مجاني عبر الإنترنت. اسحب المقابض الثمانية أو اختر شكلًا جاهزًا لإنشاء أشكال CSS عضوية ونسخ الكود فورًا.
- محول الألوان محول ألوان مجاني عبر الإنترنت. تحويل فوري لتنسيقات HEX و RGB و HSL و HSV مع منتقي بصري. 100% خاص، يعمل في متصفحك.
- مولد التخفيف CSS مولد التخفيف في CSS مجاني عبر الإنترنت. اسحب نقطتي تحكم cubic-bezier على منحنى تفاعلي، واختر من بين 18 نمطًا جاهزًا، وشاهد معاينة بحركة كرة متكررة، وانسخ دالة التوقيت فورًا.
- مولد ظل النص CSS مولد text-shadow في CSS مجاني عبر الإنترنت. رصّ طبقات ظل متعددة مع الإزاحة والضبابية واللون والشفافية، جرّب أنماطًا جاهزة مثل النيون وثلاثي الأبعاد والريترو، وانسخ كود CSS فورًا.