مولد ظل الصندوق CSS
صمم تأثيرات ظل الصندوق بصريًا مع معاينة في الوقت الفعلي. أضف طبقات ظل متعددة، وعدّل كل معلمة، وانسخ CSS.
ما هو مولد ظل الصندوق CSS؟
يساعدك مولد ظل الصندوق CSS على إنشاء تأثيرات الظل لعناصر HTML دون كتابة التعليمات البرمجية يدويًا. يمكنك ضبط معلمات مثل الإزاحة الأفقية/الرأسية، ونصف قطر الضبابية، والانتشار، واللون، والشفافية باستخدام عناصر تحكم مرئية، وتنتج الأداة قيمة خاصية CSS الدقيقة لك.
كيفية إنشاء ظل صندوق
- ضبط الإزاحات — استخدم منزلقات X و Y لتحديد موضع الظل
- تعيين الضبابية والانتشار — التحكم في نعومة وحجم الظل
- اختر لونًا — اختر لون الظل واضبط شفافيته
- تبديل الداخل — التبديل بين الظل الخارجي والداخلي
- إضافة طبقات — قم بتجميع ظلال متعددة للحصول على تأثيرات معقدة
- نسخ CSS — انقر فوق زر النسخ للحصول على الكود النهائي
لماذا تستخدم مولد ظل الصندوق هذا؟
- تحرير مرئي — شاهد تغييرات الظل في الوقت الفعلي على مربع المعاينة
- متعدد الطبقات — ادمج ما يصل إلى 5 طبقات ظل للحصول على تأثيرات عميقة
- تحكم دقيق — قم بضبط الإزاحة والضبابية والانتشار والشفافية والداخل بشكل مستقل
- إخراج نظيف — احصل على CSS منسقة بشكل صحيح وجاهزة للصق في ورقة الأنماط الخاصة بك
- الخصوصية — كل شيء يعمل محليًا في متصفحك
FreeToolbox مقابل مولدات الظل الأخرى
| الميزة | FreeToolbox | cssmatic.com | shadows.brumm.af |
|---|---|---|---|
| متعدد الطبقات | حتى 5 | طبقة واحدة | غير محدود |
| تبديل الداخل | نعم | نعم | لا |
| التحكم في الشفافية | نعم | محدود | نعم |
| إعلانات | أقل حد | كثيفة | لا يوجد |
| الوضع الداكن | نعم | لا | نعم |
الأسئلة الشائعة
ما هو الفرق بين الضبابية والانتشار؟
تتحكم الضبابية في مدى نعومة/انتشار حواف الظل. يتحكم الانتشار في مقدار توسع أو تقلص الظل من حجم العنصر. الانتشار الموجب يجعله أكبر، والانتشار السالب يجعله أصغر.
هل يمكنني إضافة ظلال متعددة؟
نعم. انقر فوق "إضافة طبقة" لتجميع ما يصل إلى 5 طبقات ظل. تحتوي كل طبقة على عناصر تحكم مستقلة لجميع المعلمات.
ماذا يفعل الداخل؟
ينقل الداخل الظل داخل العنصر بدلاً من خارجه، مما يخلق ظلًا داخليًا أو تأثيرًا مضغوطًا.
هل يعمل أيضًا لظل النص؟
تنتج هذه الأداة CSS لظل الصندوق. يستخدم ظل النص بناء جملة مشابهًا ولكن بدون قيمة الانتشار أو خيار الداخل. يمكنك تكييف الإخراج يدويًا.
هل هذه الأداة مجانية؟
نعم، مجانية تمامًا بدون قيود أو تسجيل مطلوب.