مولّد box-shadow

ما مولّد box-shadow؟

هو أداة تعطيك مقابض للأرقام الأربعة التي يأخذها ظل CSS — الإزاحة الأفقية والإزاحة الرأسية ونصف قطر التمويه والامتداد — مع لون، وتكتب لك التصريح. وإن أضفت ظلالًا تراكمت، وهكذا تُبنى الظلال الناعمة المتعددة الطبقات في الواجهات الحديثة.

وهذه الأداة تخبرك أيضًا بما يعنيه نصف قطر التمويه، لأنه لا يعني ما يوحي به اسمه. فاللوحة تحت المعاينة تحوّل تمويهك إلى الرقم الذي يستعمله محرّك الرسم فعلًا، وإلى المسافة التي سيظل ظلّك يرسم عندها.

وكل شيء يجري في متصفحك. فلا يُرفع شيء ولا حساب يُنشأ.

طريقة الاستعمال

1. اضبط الأرقام الأربعة. فالإزاحة تحرّك الظل، والتمويه يليّن حافته، والامتداد يكبّر الشكل أو يصغّره قبل أي تمويه. والامتدادُ السالب هو ما تحصل به على ظل ملتصق تحت البطاقة بلا هالة حولها.
2. أضف طبقات إن أردت عمقًا. فالعمق الحقيقي يأتي عادةً من ظلّين أو ثلاثة بتمويهات مختلفة، لا من ظل واحد كبير. ولاحظ أن الظلال تُرسم بالأول فوق ما بعده، عكس ترتيب قراءة القائمة.
3. اقرأ اللوحة ثم انسخ. فهي تعرض الانحراف المعياري الغاوسي المقابل لتمويهك، وإلى أين يظل الظل يرسم، وقيمةَ filter: blur() التي تبدو مثله. وكتلةُ CSS جاهزة للّصق.

نصف قطر تمويه مقداره 20 بكسل ليس 20 بكسلًا من التمويه

مواصفة CSS دقيقة في هذا، ولا يكاد مولّد يردّده. ففي بابها عن تمويه حواف الظل تقول CSS Backgrounds and Borders Level 3 إن الظل المرسوم يجب أن يقارب — وكل بكسل في حدود 5% من قيمته المضبوطة — الصورةَ التي تنتج عن تطبيق تمويه غاوسي انحرافُه المعياري نصفُ نصف قطر التمويه.

فـ`box-shadow: 0 0 20px` توزيعٌ غاوسي انحرافه المعياري 10. أي أن نصف قطر التمويه سيغمتان. وليس هذا تفصيلًا إن كنت تستعمل المرشّحات أيضًا، لأن `filter: blur(20px)` تأخذ الانحراف المعياري مباشرةً: الرقم نفسه، والكلمة نفسها، وضِعفُ التليين. ولتحصل على مثل `filter: blur(N)` بظلٍّ تحتاج نصفَ قطر 2N، وهذه الأداة تتحقق من ذلك بوصفه مطابقةً مضبوطة عند كل مسافة لا تقريبًا.

ومن الحساب تخرج نتيجتان نافعتان. فتمويهُ حافةٍ مستقيمة بغاوسيٍّ يعطي دالة الخطأ، ودالةُ الخطأ تمرّ بالنصف تمامًا عند العتبة. فيقع الظل المموَّه عند 50% بالضبط من شفافية لونه على طول الحد الذي رسمتَه، لا عند قوّته الكاملة. ونصفُ التمويه يقع داخل الشكل ونصفُه خارجه، ولهذا لا يكبّر رفعُ التمويه الظلَّ أبدًا: بل يجعل الحافة أكثر ضبابيةً، وعند الحافة أفتحَ لونًا. أما تكبير الظل فهو عمل الامتداد، وكثيرًا ما يُخلط بينهما.

والنتيجة الثانية هي التي تسبّب الأخطاء. فللغاوسي ذيول، فلا يقف الظل عند نصف قطر تمويهه. وحسابُ الموضع الذي تهبط عنده الشفافية دون خطوة الثمانية بتات — وهو الموضع الذي لا يمكن رسم شيء بعده — يعطي نحو 1.33 من نصف القطر، في كل اتجاه وعند كل مقاس. فتمويهُ 20 بكسلًا يظل يرسم شيئًا عند 27 بكسلًا. فإن كان في الحاوي overflow hidden وبدا ظلّك مقتطعًا مع أن الأرقام كانت تبدو متّسعة، فهذه النسبةُ هي السبب.

ولا شيء من هذا يجعل الظل يبدو خاطئًا، بل يجعله متوقَّعًا. والسببُ في معرفة الانحراف المعياري أنه الرقم الذي يُعبَّر به عن كل تمويه آخر حولك — مرشّحات SVG، وظلال canvas، وأدوات التصميم — وbox-shadow هي الشاذّة إذ تضاعفه.

حدود معلنة بصراحة

المعاينة عنصر حقيقي بـbox-shadow حقيقي، فما تراه يرسمه متصفحك أنت. أما أرقام اللوحة فمحسوبة من المواصفة لا مقيسة من البكسلات: فالمواصفة تسمح بـ5% لكل بكسل، فيجوز للمتصفح أن يحيد قليلًا عن الغاوسي المثالي، وبعضها يحيد، خصوصًا عند أنصاف الأقطار الكبيرة حيث يقارب بتمويهات صندوقية مكررة.

ولوحةُ التحليل تصف الظل الأول في القائمة. وعند تعدد الطبقات ينطبق الحساب على كل طبقة على حدة ثم تتركّب، وهذا ما لا يلخّصه رقمٌ واحد بأمانة، فلا تتظاهر الأداة بذلك.

والمدى محسوب لحافةٍ مستقيمة. أما عند الزاوية فالظل تمويهُ شكلٍ منحنٍ، فيختلف الانحدار قليلًا، وفي الظل الداخلي تنقلب الهندسة كلها. ورقمُ الحافة المستقيمة هو الصحيح للسؤال العملي، أي كم يحتاج هذا من فسحة، وليس مضبوطًا عند الزوايا.

ولغةُ التصميم في هذا الموقع تمنع الظلال منعًا، ولم يتغير ذلك: فمربّع المعاينة هو الظل الوحيد في هذه الصفحة، وسائرُها مسطّح عن قصد. والقاعدةُ تقيّد صفحاتنا لا أداةً صُنعت لصفحات غيرنا. ويحسن القول إن الظل غالبًا أداةٌ خاطئة على أي حال: فحدٌّ رفيع أو خلفيةٌ ذاتُ لمسة لونية يحملان التراتبَ نفسه بلا كلفة رسم ولا هالة.

ويحمل المحرّك 40 تحققًا. ولأن جافاسكربت لا دالةَ خطأٍ فيها، لزم كتابةُ واحدة، وهي تُقارَن بمكتبة بايثون القياسية على 1,207 نقاط بأسوأ خطأ دون 1e-7، ومعها ضابطٌ يؤكد أن دالةً خاطئةً معقولةَ المظهر لا تجتاز العتبة نفسها. ويشغّل الإطارُ عرّافَ بايثون بنفسه بدل أن يطلب خطوةً سابقة، بعد أن تخطّت النسخةُ الأولى تلك المقارنةَ في صمت على ويندوز، لأن Git Bash وNode يختلفان في موضع ‎/tmp.

لماذا هذه الأداة مجانية؟

أربعةُ مقابض ودالةُ خطأ عملٌ يؤديه جهازك في الحال. فلا يُرفع شيء، ولا حساب، ولا شيء يُختم بعلامة مائية.

وإن أردت الزوايا لا الظلال، فمولّد border-radius في هذا الموقع بجوارك، وله حكاية شبيهة عن قاعدةٍ في المواصفة لا يعرضها أحد.