छाया की स्तुति में

प्लेटो द्वारा पुनर्प्रकाशित

अनुयायियों: 0

हमारे प्रिय मित्र रॉबिन का एक नया निबंध है जिसका नाम है छाया की प्रशंसा में. अब, इससे पहले कि आप वहाँ पर जाएँ, CSS बॉक्स शैडो, टेक्स्ट शैडो और शैडो फिल्टर्स पर नगेट्स की तलाश करें… यह है नहीं कि. यह फोटोग्राफी पर एक निबंध है और रॉबिन ने कैमरे के साथ छाया सौंपने के बारे में क्या सीखा है।

तो, इसे क्यों साझा करें? क्योंकि यह बहुत अच्छा है कि उन्होंने एक निबंध को समर्पित एक लेख निर्देशित पृष्ठ बनाया। और यदि आप उस पर खुले DevTools को क्रैक करते हैं तो आप CSS के बारे में बहुत कुछ सीखेंगे:

केंद्रीकरण तकनीक। ध्यान दें कि सीएसएस ग्रिड का उपयोग कैसे किया जाता है <body> बस करने के लिए पैम्फलेट को केंद्र में रखें. फिर रॉबिन इसके लिए फिर से प्रत्येक पर पहुंचता है .frame निबंध की सामग्री के साथ एक ही काम करने के लिए।
"अशुद्ध" पृष्ठभूमि छवियां। रॉबिन प्रत्येक के लिए एक सीएसएस वर्ग बनाकर अपने लिए बहुत काम कर सकता था .frame पृष्ठभूमि चित्र प्राप्त करने के लिए। इसके बजाय, वह उपयोग करता है object-fit: cover इनलाइन एचटीएमएल पर <img>s भरते समय पक्षानुपात बनाए रखने के लिए .frame कंटेनर। (वह वास्तव में है इस बारे में लिखा है इससे पहले।) यह निश्चित रूप से बहुत सारे CSS'ing को बचाता है, लेकिन यह उसे जरूरत पड़ने पर ऑल्ट टेक्स्ट का उपयोग करने की भी अनुमति देता है। मुझे आश्चर्य है कि अगर a <figure>/<figcaption> संरचना इसके बजाय यहां काम कर सकती थी लेकिन मुझे संदेह है कि जो हो रहा है उसके लिए यह बहुत अतिरिक्त लाभ प्रदान करेगा।
संदर्भों को ढेर करना। उन नकली पृष्ठभूमि छवियों का एक और लाभ? वे पूर्ण स्थिति का उपयोग करते हैं जो एक स्टैकिंग संदर्भ बनाता है, जिससे रॉबिन को सेट करने की अनुमति मिलती है z-index: 0 छवियों पर। इस तरह, टेक्स्ट सीधे ऊपर के साथ ढेर हो जाता है z-index: 1. फिर से, सीएसएस ग्रिड सभी केंद्रों को संभाल रहा है ताकि चीजें अच्छी तरह से गठबंधन हो जाएं।
स्क्रॉल स्नैपिंग। मैं हमेशा मोहब्बत यह जब मैं जंगली में सीएसएस स्क्रॉल स्नैपिंग देखता हूं। रॉबिन ने इसे यहां उपयोग करने के लिए एक अच्छा विकल्प बनाया, क्योंकि यह वास्तव में फ्रेम के माध्यम से स्क्रॉल करते समय पूरे पृष्ठ-मोड़ अनुभव को उधार देता है। क्षैतिज स्क्रॉलिंग परेशान करने वाली हो सकती है, लेकिन अच्छी तरह से निष्पादित होने पर बेहद सुरुचिपूर्ण भी हो सकती है क्योंकि यह यहां है कि यह कैसे संकीर्ण-स्तंभ डिजाइन को बढ़ाता है। यदि आप एक अच्छी व्याख्या चाहते हैं कि यह सब कैसे काम करता है, तो रॉबिन के पास भी है क्षैतिज स्क्रॉल स्नैपिंग के बारे में लिखा है.