सीएसएस मास्क का उपयोग करके एक स्विच यूआई कैसे बनाएं
इमेज प्रोसेसिंग में, मास्किंग एक ऐसी तकनीक है जो आपको अनुमति देती है एक छवि छिपाएँ दूसरे के साथ। छवि के एक हिस्से को बनाने के लिए मास्क का उपयोग किया जाता है के माध्यम से देखना. आप सीएसएस का उपयोग करके मास्किंग गुणों की मदद से मास्किंग कर सकते हैं.
आज की पोस्ट में हम दो PNG चित्र और CSS मास्किंग तकनीकों का उपयोग करके एक नकाबपोश छवि बनाएँगे, और उपयोगकर्ताओं को छवि के दो राज्यों को संभालने की अनुमति देंगे (दिन तथा रात) एक स्विच यूआई की मदद से.
कुछ ब्राउज़र-संगतता समस्याओं के कारण - हर ब्राउज़र में सभी मास्किंग गुण समर्थित नहीं हैं (जून 2016 तक) - मैं दिखाऊंगा मास्क जोड़ने के लिए दो तकनीकें, वेबकिट-आधारित ब्राउज़र के लिए एक, और फ़ायरफ़ॉक्स के लिए एक। इस तीन-चरण ट्यूटोरियल में दो पहले चरण हर ब्राउज़र के लिए समान हैं, लेकिन तीसरे चरण में अंतर होगा.
चरण 1. एक मूल स्विच बनाएं
चूंकि एक सामान्य स्विच में दो राज्य होते हैं केवल एक सक्षम एक समय में, आप एक का उपयोग कर सकते हैं दो का रेडियो बटन समूह स्विच के काम के घटकों को बनाने के लिए। प्रत्येक रेडियो बटन को उनके मूल तत्व के बाएँ और दाएँ छोर पर रखें.
रेडियो बटन समूह प्रत्येक रेडियो बटन को समान देकर बनाए जाते हैं नाम विशेषता। एक रेडियो बटन समूह में, केवल एक रेडियो बटन एक समय में जाँच की जा सकती है.
हम निम्नलिखित HTML और CSS से शुरू करते हैं:
एचटीएमएल
सीएसएस
नीचे सीएसएस में, मैंने स्क्रीन पर रेडियो बटन लगाने के लिए निरपेक्ष स्थिति का उपयोग किया, जहां मैं चाहता हूं.
# राउटरवॉपर चौड़ाई: 450px; ऊंचाई: 90 पीएक्स; गद्दी: 10 पीएक्स; मार्जिन: 100px ऑटो 0 ऑटो; सीमा-त्रिज्या: 55px; बॉक्स-छाया: 0 0 10px 6px #EAEBED; पृष्ठभूमि: #fff; #innerWrapper ऊंचाई: 100%; बॉर्डर-त्रिज्या: 45px; छिपा हुआ सैलाब; स्थिति: रिश्तेदार; .radio चौड़ाई: 90px; ऊंचाई: 100%; स्थिति: पूर्ण; मार्जिन: 0; अपारदर्शिता: 0; #rightRadio सही: 0; .radio: नहीं (: चेक किया गया) कर्सर: पॉइंटर;
मैंने जोड़ा अस्पष्टता: 0 के लिए शासन .रेडियो क्रम में कक्षा रेडियो बटन छिपाएँ. नीचे दिए गए कोड ब्लॉक में अंतिम नियम, कर्सर: सूचक; अनियंत्रित रेडियो बटन के लिए सूचक कर्सर दिखाता है, ताकि उपयोगकर्ताओं को पता चले कि स्विच राज्य को चालू करने के लिए किस बटन पर क्लिक करना है.
चरण 2. स्विच में खाल जोड़ें
इस चरण में, हम दो जोड़ेंगे मैं "डे" और "नाइट" स्विच के दो राज्यों के रूप में उपयोग कर रहा हूं, जो मिन्ह केली ले द्वारा ड्रिबल शॉट से प्रेरित है।. एचटीएमएल सीएसएस पॉइंटर-ईवेंट सीएसएस संपत्ति के साथ आप उन परिस्थितियों को सेट कर सकते हैं जिनके तहत एक ग्राफिक तत्व हो सकता है माउस घटनाओं द्वारा लक्षित. ऊपर दिए गए कोड के विकल्प के रूप में, दो क्रोम और अन्य वेबकिट-आधारित ब्राउज़रों के लिए, मैं इसका उपयोग करूंगा सामान्य तौर पर, दो प्रकार के मास्किंग होते हैं: चमक तथा अल्फा. Chrome में (संस्करण 51.0.2704.103, Win10 के रूप में), केवल वर्तमान में काम करने के लिए अल्फ़ा लगता है. सीएसएस में, यहाँ सीएसएस है कि एक मुखौटा जोड़ता है वेबकिट ब्राउज़र में छवियों को देखने के लिए: सीएसएस मैंने इस्तेमाल किया रात की त्वचा के लिए, मैंने एक पारदर्शी सर्कल बनाया, और मैंने कंटेनर के शेष भाग को अपारदर्शी बनाया। दिन की त्वचा के लिए, मैंने इसके विपरीत किया: के साथ एक अपारदर्शी चक्र बनाया हालाँकि यह अभी तक वेबकिट ब्राउज़र में समर्थित नहीं है, मैंने इसमें जोड़ा है जैसा कि आप ऊपर देख सकते हैं, सर्कल की सीमा बहुत चिकनी नहीं है। सेवा मेरे खुरदुरे किनारों को छिपाएं, एक जोड़ें एचटीएमएल सीएसएस हालांकि इसलिए, के बजाय ए एसवीजी छवि ऊपर के संयोजन की तरह दिखती है सफेद आयत और ए काला घेरा. इसे जोड़ें, और एक के साथ एक और एक काली आयत और ए सफेद घेरा HTML के मुखौटे के रूप में हमने वेबकिट संस्करण में उपयोग किया. एचटीएमएल के लिए CSS कोड को बदलें (या साथ मिलाएं) अब हमारे पास दो अलग-अलग मुखौटा चित्र (सीएसएस ग्रेडिएंट और एसवीजी), दो अलग-अलग मुखौटा प्रकार (अल्फा और ल्यूमिनेंस) हैं, और दोनों वेबकिट और फ़ायरफ़ॉक्स समर्थन. सीएसएस
# दिनस्किन पृष्ठभूमि-छवि: url ('day.png'); # नाइटस्किन पृष्ठभूमि-छवि: url ('night.png'); .स्किन चौड़ाई: 100%; ऊंचाई: 100%; सूचक-घटनाएँ: कोई नहीं; स्थिति: निरपेक्ष; मार्जिन: 0; सूचक-घटनाएँ: कोई नहीं; नियम को खाल में जोड़ा जाता है ताकि स्विच पर क्लिक की जाने वाली घटनाएं हो सकें उनके पास से गुजरो, तथा रेडियो बटन तक पहुँचें.
चरण 3 ए। मास्क जोड़ें (वेबकिट संस्करण)
मुखौटा छवि सीएसएस संपत्ति, जो - इस पोस्ट के लेखन के रूप में - केवल साथ काम करती है -वेबकिट वेबकिट ब्राउज़र में उपसर्ग। मुखौटा छवि संपत्ति आपको देता है छवि निर्दिष्ट करें इस्तेमाल किया जाएगा के रूप में मुखौटा.अल्फा तथा चमक के मान हैं मुखौटा प्रकार संपत्ति.# नाइटस्किन पृष्ठभूमि-छवि: url ('night.png'); मुखौटा प्रकार: अल्फा; शेष भाग अपारदर्शी के साथ / * पारदर्शी वृत्त ; / * जब दिन की त्वचा का चयन किया गया * / #leftadio: चेक किया गया ~ # नाइटस्किन मास्क-प्रकार: अल्फा; / * शेष भाग पारदर्शी के साथ अपारदर्शी सर्कल * / -webkit- मुखौटा-छवि: रेडियल-ग्रेडिएंट (सर्कल में 405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0,45px) ; -वेबकिट-मुखौटा छवि प्रारंभिक मुखौटा छवि बनाने के लिए संपत्ति। इसका मान उपयोग करता है रेडियल-ढाल () सीएसएस फ़ंक्शन जिसका उपयोग पूर्व-परिभाषित आकार, रेडियल ग्रेडिएंट और ग्रेडिएंट के केंद्र से एक छवि बनाने के लिए किया जाता है.रेडियल-ढाल () कार्य, और शेष भाग को पारदर्शी बनाया.मुखौटा प्रकार सीएसएस को भविष्य के संदर्भ के लिए संपत्ति.
#switchBtnOutline चौड़ाई: 90px; ऊंचाई: 100%; बॉर्डर-त्रिज्या: 45px; बॉक्स-छाया: 0 0 2px 2px ग्रे इनसेट, 0 0 10px ग्रे; सूचक-घटनाओं: कोई नहीं; स्थिति: पूर्ण; मार्जिन: 0; / * प्लेस #switchBtnOutline सही छोर पर जब दिन त्वचा का चयन किया जाता है * / #leftRadio: जाँच ~ ~ स्विचबटनऑनलाइन सही: 0;
चरण 3 बी। मास्क जोड़ें (फ़ायरफ़ॉक्स संस्करण)
मुखौटा छवि CSS संपत्ति वास्तव में एक है लंबी संपत्ति, और यह आशुलिपि संपत्ति का हिस्सा है मुखौटा इससे आप छवि को मास्क के रूप में इस्तेमाल कर सकते हैं। जबकि मुखौटा छवि फ़ायरफ़ॉक्स में अभी तक समर्थित नहीं है, मुखौटा है.मुखौटा संपत्ति के साथ बनाई गई छवि को स्वीकार करना चाहिए रेडियल-ढाल () सीएसएस फ़ंक्शन एक मूल्य के रूप में, जैसे मुखौटा छवि संपत्ति किया, फ़ायरफ़ॉक्स में अभी तक इसके लिए कोई समर्थन नहीं है.रेडियल-ढाल () छवि, चलो मुखौटा प्रकार के साथ मुखौटा छवि के रूप में एक एसवीजी छवि का उपयोग करें चमक.
#nightSkin हमने निम्नलिखित कोड के साथ वेबकिट संस्करण में उपयोग किया है। और आपने कल लिया.# नाइटस्किन पृष्ठभूमि-छवि: url ('night.png'); मास्क-प्रकार: ल्यूमिनेन्स; मुखौटा: यूआरएल (#leftSwitchMask); #leftRadio: ~ ~ नाइटस्किन मास्क-प्रकार: luminance की जाँच की; मुखौटा: यूआरएल (#rightSwitchMask); डेमो देखें
