النتائج مقدَّمة لأغراض إعلامية فقط وقد تحتوي على أخطاء. يُرجى التحقق من المعلومات المهمة بشكل مستقل. استخدام هذه الأداة على مسؤوليتك الخاصة.
ماذا تفعل هذه الأداة
تنشئ أداة توليد ظل الصندوق قيمة CSS box-shadow باستخدام منزلقات للإزاحة الأفقية والإزاحة الرأسية والضبابية والانتشار واللون والعتامة. تتحدّث المعاينة أثناء السحب، ويكون سطر الناتج جاهزًا للنسخ. وتبدأ الأداة بظل ناعم على بُعد 10px أسفل الصندوق، مع ضبابية 20px ولون أسود بعتامة 25%.
تُكتب الأطوال الأربعة بترتيب CSS: إزاحة x، إزاحة y، نصف قطر الضبابية، نصف قطر الانتشار. الإزاحات الموجبة تحرّك الظل إلى اليمين وإلى الأسفل، والقيم السالبة تحرّكه إلى اليسار وإلى الأعلى. تنعّم الضبابية الحافة، ويكبّر الانتشار الظل أو يصغّره قبل تطبيق الضبابية. ويُكتب اللون بصيغة rgba()، فتكون العتامة مضمّنة فيه ويندمج الظل مع أي خلفية.
متى تستخدمها
- إضفاء العمق على البطاقات والنوافذ المنبثقة (modals) والقوائم المنسدلة في تصميم مسطّح.
- مطابقة مستويات الارتفاع (elevation) في نظام تصميم مثل Material Design.
- إضافة تأثير خفيف عند التركيز (focus) أو التمرير (hover) على الأزرار.
- إنشاء توهّج ملوّن باستخدام إزاحة صفرية ولون ساطع.
مثال عملي
المدخلات
X 0، Y 10، الضبابية 20، الانتشار 0، اللون #000000، العتامة 25%المخرجات
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);أسئلة حول هذه الأداة
كيف أصنع ظلًا داخليًا؟
أضف الكلمة المفتاحية inset في بداية القيمة: box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);. عندها يُرسم الظل داخل الصندوق، وهو ما يناسب الأزرار المضغوطة وحقول الإدخال.
هل يمكنني الجمع بين عدة ظلال؟
نعم، افصل بينها بفواصل. وكثيرًا ما يستخدم الارتفاع الواقعي ظلّين: ظلًا صغيرًا حادًا للحافة وآخر كبيرًا ناعمًا للعمق، مثل 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12).
لماذا يبدو ظلي رماديًا وباهتًا على خلفية ملوّنة؟
الأسود الخالص بعتامة منخفضة يُفقد الألوان التي تحته تشبّعها. استخدم درجة أغمق من لون الخلفية بدلًا من الأسود لتحصل على نتيجة أنظف.
هل تُبطئ الظلال الصفحة؟
الظلال الثابتة خفيفة. أما تحريك ظل كبير بضبابية عالية فقد يكلّف إطارات على الأجهزة البطيئة؛ لذا حرّك بدلًا من ذلك قيمة opacity لعنصر زائف (pseudo-element) يحمل الظل.
هل هذه الأداة مجانية؟
نعم، إنها مجانية. دون تسجيل أو بريد إلكتروني. تظهر النتيجة في هذه الصفحة.
كيف أحصل على النتيجة؟
استخدم الأداة في هذه الصفحة. تظهر النتيجة هنا دون الحاجة إلى إرسالها بالبريد الإلكتروني.