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

للظلّ أربعة أرقام ولون. فالأولان يحرّكانه أفقيًا وعموديًا. والضبابية تنعّم الحافّة. وهي حجم الانتقال لا حجم الظلّ. والانتشار يكبّر الظلّ أو يصغّره قبل تطبيق الضبابية، والانتشار السالب هو الحيلة وراء ظلّ ناعم لا يتسرّب من الجانبين.

والظلّ الواحد هو سبب بدو الواجهات مسطّحة. فالضوء الحقيقي ينتج أثرين متمايزين: ظلّ تماسّ داكن ضيّق تحت الجسم مباشرةً، وظلّ محيط باهت عريض حوله. و0 4px 10px rgba(0,0,0,0.2) المفرد ليس أيًّا منهما، ويُقرأ ملصقًا لا جسمًا.

والافتراضي هنا هو وصفة الطبقتين: طبقة بـ1 بكسل وعتامة 6% لحافّة التماسّ، وطبقة بـ20 بكسل وعتامة 12% مع انتشار −6 بكسل للمحيط. أطفئ واحدة وأعدها فيكون الفرق فوريًا.

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

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

لوّن الظلّ ولا تستعمل الأسود. فالأسود الصافي بعتامة 20% يبدو دائمًا متّسخًا قليلًا فوق خلفية ملوّنة. خذ أدكن لون من لوحتك بدلًا منه — أخضر داكن جدًّا تحت واجهة مصبوغة بالأخضر — فيُقرأ الظلّ ظلًّا لا لطخة. ومنتقي الألوان هنا لهذا بالضبط.

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

وراقب الكلفة. فنصف قطر ضبابية كبير على عنصر كبير من أغلى ما يرسمه متصفّح، وتحريك box-shadow يعيد الرسم في كل إطار. فإن احتجت ظلًّا يكبر عند التحويم، فحرّك عتامة عنصر زائف يحمل أصلًا الظلّ الأكبر بدلًا من ذلك.

والانضباط نفسه ينطبق على الزوايا — مولّد نصف القطر هو النصف الآخر من جعل صندوق يبدو بطاقةً مادّية.