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

كيف تعمل

كل طبقة ظل هي كائن صغير يحمل الإزاحة الأفقية والرأسية، ودرجة التمويه، والامتداد، واللون، والشفافية، وعلامة «داخلي». ولأن حقول اختيار الألوان في HTML لا تدعم الشفافية، يُفكَّك القيمة السداسية عشرية إلى مكوناتها الحمراء والخضراء والزرقاء ثم تُدمج مع منزلق الشفافية في لون rgba(). تُدمج كل الطبقات بفواصل في تصريح box-shadow واحد، ونفس هذه السلسلة تُطبَّق على عنصر المعاينة، فما تراه هو ما تنسخه. الترتيب مهم: أول ظل في القائمة يُرسم فوق البقية.

ظل واحد فقط يبدو دائمًا مصطنعًا تقريبًا. الظلال الحقيقية لها نواة كثيفة وتلاشٍ ناعم وواسع، وشيء واحد مثل 0 4px 12px rgba(0,0,0,0.25) لا يستطيع تحقيق الأمرين معًا. الحيلة التي يستخدمها كل نظام تصميم متقن هي تكديس ظلين أو ثلاثة بشفافية منخفضة: ظل ضيق مثل 0 1px 2px بنسبة 10% مع ظل واسع 0 8px 24px بنسبة 8%. كل طبقة بمفردها بالكاد تُلاحَظ، لكن معًا تعطي إحساسًا حقيقيًا بالعمق.

كل شيء يعمل في جافاسكريبت هذه الصفحة: لا يُرسل أي لون تختاره ولا أي كود CSS تولّده إلى أي مكان، وهو ما يؤكده تبويب الشبكة بأدوات المطوّر أثناء عملك.