صديقنا العزيز روبن لديه مقال جديد بعنوان في مدح الظلال. الآن ، قبل أن تقفز إلى هناك للبحث عن شذرات في ظلال مربع CSS وظلال النص ومرشحات الظل ... هذا هو ليس هذا. إنه مقال عن التصوير الفوتوغرافي وما تعلمه روبن عن التعامل مع الظلال بالكاميرا.
لذا ، لماذا تشارك هذا؟ لأنه من الرائع إنشاء صفحة موجهة لمقالة مخصصة لمقال واحد. وستتعلم الكثير عن CSS إذا قمت بفتح DevTools عليها:
- تقنيات التمركز. لاحظ كيف يتم استخدام CSS Grid في ملف
<body>ببساطة توسيط الكتيب. ثم يصل إليه روبن مرة أخرى في كل منهما.frameمن المقال لفعل الشيء نفسه مع المحتوى. - صور خلفية "فو". كان بإمكان Robin القيام بالكثير من العمل لنفسه من خلال إنشاء فئة CSS لكل منها
.frameللحصول على صور الخلفية. بدلا من ذلك ، يستخدمobject-fit: coverعلى HTML مضمّن<img>s للحفاظ على نسبة العرض إلى الارتفاع أثناء ملء.frameوعاء. (هو في الواقع كتبت عن هذا قبل.) هذا بالتأكيد يوفر الكثير من CSS ، ولكنه يسمح له أيضًا باستخدام النص البديل إذا لزم الأمر. أتساءل نوعًا ما إذا كان ملف<figure>/<figcaption>كان من الممكن أن يعمل الهيكل هنا بدلاً من ذلك ، لكنني أشك في أنه سيوفر فائدة إضافية كبيرة لما يحدث. - تكديس السياقات. فائدة أخرى لتلك الصور الخلفية فو؟ يستخدمون تحديد الموضع المطلق الذي يخلق سياق التراص ، مما يسمح لـ Robin بتعيين ملف
z-index: 0على الصور. بهذه الطريقة ، يتم تكديس النص مباشرة في الأعلى بامتدادz-index: 1. مرة أخرى ، تتعامل CSS Grid مع كل التمركز بحيث تتم محاذاة الأشياء بشكل جيد. - العض التمرير. انا دائما حب عندما أرى التمرير CSS يلتقط في البرية. قام Robin باختيار جيد لاستخدامه هنا ، لأنه يضفي حقًا تجربة قلب الصفحة بأكملها أثناء التمرير عبر الإطارات. يمكن أن يكون التمرير الأفقي جنونًا ، ولكنه أيضًا أنيق للغاية عند تنفيذه جيدًا كما هو الحال هنا في كيفية تحسين تصميم العمود الضيق. إذا كنت تريد شرحًا لطيفًا لكيفية عمل كل شيء ، فإن Robin لديه أيضًا مكتوب حول العض التمرير الأفقي.
إذا لم يكن هناك شيء آخر ، فإن Robin كاتب ممتاز ويستحق قراءة أي شيء ينشره ، CSS وما بعده.
