सीएसएस के साथ स्क्रॉल करते समय गतिशील रूप से रंग कैसे बदलें

लोगो जैसे स्थिर वेबसाइट तत्वों के साथ, पृष्ठ को स्क्रॉल करते समय आप अक्सर रंगों के मिश्रण में चले जाते हैं। यह तब हो सकता है जब स्थिर तत्व वेबसाइट के उस भाग पर जाता है जो तत्व के समान रंग साझा करता है। उस पृष्ठभूमि पर स्थिर रहने के दौरान स्थिर तत्व अदृश्य रहेगा।

इस समस्या को ठीक करने के लिए, आपको लोगो के रंग को डायनेमिक रूप से उलटना होगा जब वह समान रंग वाले तत्व पर जाता है। बिना किसी जावास्क्रिप्ट की आवश्यकता के सिर्फ CSS का उपयोग करके इस प्रभाव को प्राप्त करना सीखें!

स्टार्टर कोड डाउनलोड करें

इस ट्यूटोरियल का पालन करने के लिए, स्टार्टर कोड को इससे डाउनलोड करें गिटहब रिपॉजिटरी आपकी स्थानीय मशीन पर।

खुला index.html एक ब्राउज़र में जो यहाँ दिखाए गए पेज की तरह दिखना चाहिए:

HTML पेज में एक लोगो और चार सेक्शन होते हैं। प्रत्येक खंड में एक डमी शीर्षक और डमी टेक्स्ट के तीन पैराग्राफ हैं। लोगो का टेक्स्ट दूसरे और चौथे सेक्शन की पृष्ठभूमि के समान काले रंग का है। यह प्रभाव से आता है nth-चाइल्ड (सम) ब्लॉक इन Styles.css, जो काले रंग की पृष्ठभूमि को सम वर्गों पर लागू करता है।

लोगो को चिपचिपा बनाना

इस स्टार्टर कोड के साथ, लोगो शीर्ष पर नहीं टिकता है। इसका मतलब है कि जब आप पेज को नीचे स्क्रॉल करते हैं तो लोगो गायब हो जाता है। आप अपने लोगो को स्थिति: चिपचिपा सीएसएस फ़ाइल के अंदर इसकी संपत्ति। CSS में पोजिशनिंग के बारे में गहराई से जानने के लिए, हमारी पोस्ट को पढ़ें सीएसएस स्थिति संपत्ति.

सुनिश्चित करें कि लोगो शीर्ष पर चिपका रहे, लेकिन ऐसा केवल बड़ी स्क्रीन पर ही करें (क्योंकि, छोटे आकार की स्क्रीन पर, यह अन्य तत्वों पर जा सकता है)। निम्नलिखित HTML उत्तरदायी मीडिया क्वेरी यह प्रभाव बनाता है:

@मीडिया(चौड़ाई > 980 पीएक्स) {
।प्रतीक चिन्ह { 
पद: चिपचिपा; 
ऊपर: .5रेम; 
 }
}

अब लोगो हमेशा शीर्ष पर बना रहेगा और स्क्रॉल करते ही आपका अनुसरण करेगा। लेकिन आप यह भी देखेंगे कि जब आप डार्क बैकग्राउंड सेक्शन में स्क्रॉल करते हैं तो टेक्स्ट गायब हो जाता है (क्योंकि लोगो टेक्स्ट भी काला होता है)। अब इसे ठीक करने का तरीका देखें।

अपने स्टिकी हैडर में मिक्स-ब्लेंड-मोड जोड़ना

यह सुनिश्चित करने के लिए कि काली पृष्ठभूमि पर काला लोगो गायब न हो, आपको रंग को गतिशील रूप से उलटना होगा। इसका उपयोग करने का तरीका है मिक्स-ब्लेंड-मोड CSS संपत्ति और इसे का मान निर्दिष्ट करना अंतर:

@मीडिया(चौड़ाई > 980 पीएक्स) { 
।प्रतीक चिन्ह { 
पद: चिपचिपा; 
ऊपर: .5रेम; 
मिक्स-ब्लेंड-मोड: अंतर
 }
}

मिक्स-ब्लेंड-मोड CSS गुण निर्दिष्ट करता है कि किसी तत्व की सामग्री को तत्व के मूल तत्व और उसकी पृष्ठभूमि की सामग्री के साथ कैसे मिश्रित होना चाहिए। अलग-अलग मान प्रत्येक पिक्सेल का अंतर मान लेते हैं, हल्के रंगों को उलटते हैं। इसलिए यदि रंग मान समान हैं, तो वे काले हो जाते हैं। मूल्यों में अंतर उल्टा हो जाएगा।

उपरोक्त सीएसएस जोड़ने से लोगो पूरी तरह से गायब हो जाएगा। ऐसा इसलिए है क्योंकि आपने मीडिया क्वेरी के बाहर लोगो टेक्स्ट के रंग को सफ़ेद पर सेट नहीं किया है. निम्नलिखित कोड के साथ ऐसा करें:

।प्रतीक चिन्ह { 
रंग: सफ़ेद; 
/* अन्य सीएसएस गुण */
}

अब आपने सब कुछ सफलतापूर्वक सेट कर लिया है। पृष्ठ को नीचे और काली पृष्ठभूमि में स्क्रॉल करें। आप लोगो को काले से सफेद में बदलते हुए देखेंगे।

आप काले और सफेद के अलावा अन्य रंगों के साथ भी काम कर सकते हैं। उदाहरण के लिए, यदि आप अपने लोगो टेक्स्ट का रंग चैती रंग (#008080) में बदलते हैं, तो आपको सफेद पृष्ठभूमि पर गुलाबी रंग मिलेगा। निम्न छवि यह दर्शाती है।

ज्यादातर मामलों में, आप चाहते हैं कि आपका तत्व सर्वोत्तम परिणाम प्राप्त करने के लिए सफेद हो। साथ ही, यदि आप शीर्ष पर स्क्रॉल करते हैं, तो हो सकता है कि आपको अपना लोगो आधा कटा हुआ दिखाई दे. ऐसा इसलिए होता है क्योंकि लोगो इसके बाहर मौजूद होता है तत्व। लोगो को पूर्ण रूप से दिखाने के लिए, आपको पृष्ठभूमि का रंग सेट करना होगा सफेद करने के लिए तत्व।

पाठ के बजाय लोगो के रूप में छवि का उपयोग करना

यह तकनीक केवल टेक्स्ट के साथ ही काम नहीं करती, बल्कि छवियों के साथ भी काम करती है। बेशक, आपको यह सुनिश्चित करने की ज़रूरत है कि आप लोगो के रूप में एक सफेद छवि का उपयोग करें। निम्न उदाहरण एक सफेद लोरेम इप्सम लोगो का उपयोग करता है जो उसी फ़ोल्डर में है index.html फ़ाइल:

<आईएमजीस्रोत="लॉरेमिप्सम-297.svg"alt="लोरेम इप्सम लोगो">

यहाँ उपयोग की गई छवि एक SVG (स्केलेबल वेक्टर ग्राफिक) है, जो एक प्रकार की है वेक्टर फ़ाइल.

अब आपकी लोगो छवि का रंग सफेद पृष्ठभूमि पर काला होगा जैसा कि नीचे की छवि में दिखाया गया है।

लेकिन अगर आप काले बैकग्राउंड में स्क्रोल करते हैं, तो लोगो का रंग अपने आप सफ़ेद हो जाएगा. इसे आप नीचे इमेज में देख सकते हैं।

आप लोगो को बदलकर लोगो का आकार बढ़ा भी सकते हैं फ़ॉन्ट आकार साथ ऊंचाई और चौड़ाई लोगो को लक्षित करने वाले CSS ब्लॉक में। आखिरकार, अब आप पाठ के बजाय छवि के साथ काम कर रहे हैं।

।प्रतीक चिन्ह {
रंग: सफ़ेद;
चौड़ाई: 10रेम;
/* अन्य सीएसएस गुण */
}

यदि आप स्क्रीन को सिकोड़ते हैं, तो मीडिया क्वेरी अब लागू नहीं होगी। यह विभिन्न ब्लेंड मोड्स को बंद कर देगा, जिससे आपका लोगो गायब हो जाएगा। लोगो को पेज पर वापस लाने के लिए, आपको इसे सेट करना होगा मिक्स-ब्लेंड-मोड संपत्ति मीडिया क्वेरी के बाहर लोगो पर:

।प्रतीक चिन्ह {
रंग: सफ़ेद;
चौड़ाई: 10रेम;
मिक्स-ब्लेंड-मोड: अंतर;
/* अन्य सीएसएस गुण */
}

यह हर समय लोगो पर मिश्रित मिश्रण को सक्रिय करेगा, यहां तक ​​कि बड़ी स्क्रीन पर भी। लेकिन छोटी स्क्रीन पर, लोगो सबसे ऊपर रहेगा और नीचे की ओर स्क्रॉल करने पर आपका पीछा नहीं करेगा (क्योंकि स्थिति: चिपचिपा बड़ी स्क्रीन पर ही काम करता है)। अंत में, इसे पृष्ठ से गायब होने से रोकने के लिए हमेशा एक सफेद लोगो का उपयोग करना याद रखें।

अधिक सीएसएस टिप्स और ट्रिक्स सीखें

मिक्स-ब्लेंड मोड का उपयोग करके, आप वैकल्पिक रंगों के साथ आकर्षक लेआउट बना सकते हैं। बेहतर अभी तक, आपको किसी भी रंग को हार्ड कोड करने या ब्रेकपॉइंट सेट करने की ज़रूरत नहीं है क्योंकि मिश्रण-मिश्रण-मोड गतिशील रूप से रंग को उलट देगा। यह आपको सीधे पृष्ठभूमि के आधार पर तत्व की सामग्री के हिस्सों के लिए अच्छे मिश्रण और रंग बनाने देता है।

CSS को अक्सर सीखने के लिए सबसे रोमांचक भाषाओं में से एक माना जाता है। यह आंशिक रूप से इसलिए है क्योंकि CSS युक्तियों और तरकीबों से भरा हुआ है जैसा कि आपने अभी इस लेख में सीखा है। कुछ अन्य आसान सीएसएस युक्तियाँ और तरकीबें हैं होवर प्रभाव, कंटेनरों में फिट होने के लिए छवियों का आकार बदलना, दीर्घवृत्त के साथ पाठ को छोटा करना और पाठ-रूपांतरण का उपयोग करना।