مولد ظل الصندوق
أداة مرئية لإنشاء ونسخ كود CSS box-shadow.
البيئة
مخرجات CSS
border-radius: 24px; background: #e0e0e0; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
طبقة 1
الأدوات الموصى بها
أدوات مختارة بعناية قد تجدها مفيدة
تصميم ظلال CSS (box-shadow) بصرياً
نظرة عامة
يتيح لك مولّد box-shadow صياغة خاصية CSS box-shadow بسحب المنزلقات بدل تخمين الأرقام. تضيف الظلال عمقاً وتراتبية للأزرار والبطاقات والنوافذ المنبثقة، لكن الصياغة — الإزاحات والضبابية والانتشار واللون وinset — مزعجة عند الكتابة يدوياً. تعرض هذه الأداة معاينة حية أثناء ضبط كل قيمة وتمنحك CSS الدقيق للنسخ، وكل ذلك في متصفحك.
كيفية الاستخدام
- 1
اضبط المنزلقات
حدّد الإزاحة الأفقية والعمودية والضبابية والانتشار واللون بينما تراقب المعاينة الحية.
- 2
كدّس الظلال عند الحاجة
أضف طبقات ظل متعددة للعمق، أو فعّل inset لظل داخلي.
- 3
انسخ CSS
خذ قيمة box-shadow المُولَّدة والصقها في ورقة الأنماط أو المكوّن.
كيف يعمل
تأخذ خاصية box-shadow إزاحة أفقية وعمودية ونصف قطر ضبابية وانتشاراً اختيارياً ولوناً (غالباً بشفافية). تحرّك منزلقاً لكل منها فتتحدث المعاينة فوراً، فترى بالضبط كيف يقع الظل. تكتب الأداة تصريح box-shadow المطابق، شاملاً ظلالاً متعددة مكدّسة إن أضفتها، جاهزاً للصق في ورقة الأنماط.
متى تستخدمه
إضافة ظل خفيف لرفع بطاقة أو زر عن الصفحة. مطابقة ظل من نموذج تصميم دون تخمين القيم. بناء ظل واقعي متعدد الطبقات بظلال مكدّسة. إنشاء ظل inset لعناصر واجهة مضغوطة أو غائرة. ضبط نعومة الظل ولونه للسمات الداكنة أو الفاتحة. تعلّم كيف تؤثر كل قيمة box-shadow في النتيجة.
الأسئلة الشائعة
بالترتيب: الإزاحة الأفقية، الإزاحة العمودية، نصف قطر الضبابية، والانتشار. تحرّك الإزاحات الظل، وتنعّم الضبابية حافته، ويوسّعه الانتشار أو يقلّصه. يتبعها لون، غالباً rgba() بشفافية منخفضة للطف.
ملاحظات مهمة
قد تضرّ ظلال box-shadow الثقيلة أو الكثيرة بأداء العرض، خصوصاً عند التحريك. أبقِ الظلال خفيفة وحُدّ من الطبقات المكدّسة على العناصر التي تتحرك أو تتحدث كثيراً.