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

طريقة الاستخدام

1. اضبط الإزاحة الأفقية والإزاحة الرأسية للطبقة الأولى. الإزاحة الرأسية الموجبة تنقل الظل إلى الأسفل.
2. ارفع التمويه لتلطيف الحافة، والانتشار لجعل الظل أكبر من الصندوق أو أصغر منه.
3. اختر اللون والعتامة. وأضف طبقات أخرى بالزر أضف طبقة لظل يبدو أكثر طبيعية.
4. انسخ تعريف CSS والصقه في قاعدة العنصر لديك.

كيف تُبنى القيمة

تأخذ الخاصية box-shadow ظلاً أو أكثر مفصولة بفواصل. يُكتب كل ظل بكلمة داخلي الاختيارية، ثم الإزاحتين الأفقية والرأسية، ثم نصف قطر التمويه، ثم مسافة الانتشار، ثم لون. ويُرسم الظل الأول فوق الباقي، وبدون ظل تكون القيمة none.

نصف قطر التمويه لا يكون سالباً أبداً. والتمويه الأكبر ينشر الظل بنعومة على مساحة أوسع، أما ظل الانتشار فيكبّر الظل أو يصغّره قبل تطبيق التمويه. وتُكتب العتامة قيمة ألفا للون rgba، بمنزلتين عشريتين على الأكثر.

box-shadow: [inset] offset-x offset-y blur spread color, ...

الطبقات وما يتحقق منه المحرر

يتكون الظل الناعم الطبيعي غالباً من طبقتين: ظل صغير داكن قريب من الصندوق، وظل أكبر وأفتح أبعد عنه. كل طبقة ظل واحد في القيمة. ويسمح المحرر بما يصل إلى 8 طبقات، وإزاحات وانتشار من -200 إلى 200 بكسل، وتمويه من 0 إلى 200 بكسل، وعتامة من 0 إلى 100٪.

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

الأسئلة الشائعة