📝 👨🏿‍🤝‍👨🏻 🙇🏻 जावास्क्रिप्ट के बिना स्टाइलिश सीएसएस स्विच 👋🏿 👈🏽 👈🏻

यहां मैं दिखाऊंगा कि शुद्ध सीएसएस में इनपुट के आधार पर एक स्विच कैसे बनाया जाए।

डेमो
सभी फाइलें

शुरू करने के लिए, मुझे कहना होगा कि इनपुट प्रकार के चेकबॉक्स में यह सुविधा है:
यदि यह चुना गया है (एक चेक मार्क है), तो तत्व को एक नया चेक किया गया विशेषता सौंपा गया है।
इस प्रभाव पर हमारा तत्व निर्मित होगा।

शुरू करने के लिए, हम स्वयं इनपुट और आवरण का वर्णन करेंगे

<div class="switcher"> <input id="sw" type="checkbox" class="switcher-value"> <label for="sw" class="sw_btn"></label> <div class="bg"></div> </div>

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

कक्षा बीजी के साथ एक div सिर्फ पृष्ठभूमि है।

हम मुख्य शैलियों का वर्णन करते हैं

 .switcher { width: 124px; height: 49px; cursor: pointer; position: relative; } .switcher * { transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; } .switcher .sw_btn { background: url('btn.png') 0% 0% no-repeat; width: 49px; height: 49px; display: block; cursor: pointer; z-index: 1; position: relative; } .switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; } .switcher input.switcher-value { display: none; } .switcher .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }

जैसा कि आप कोड से देख सकते हैं, हम स्वयं इनपुट छिपाते हैं। हमें केवल मूल्यों के संरक्षक के रूप में इसकी आवश्यकता है।
(वैसे, आप इस इनपुट के मूल्य के रूप में हमारे भविष्य के स्विच का मूल्य प्राप्त कर सकते हैं)

पृष्ठभूमि पर हमने स्विच ऑफ ('bg-off.png) से एक चित्र डाला:

हमने चिकनी स्विचिंग के लिए संक्रमण गुण भी निर्धारित किया है।

और अब - सबसे दिलचस्प

 .switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; } .switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; }

ये दो लाइनें और स्विच =)

पहली पंक्ति का अर्थ है कि कक्षा sw_btn के साथ तत्व के लिए इंडेंट 68px होगा,
जो तुरंत शामिल इनपुट का अनुसरण करता है (यह हमारे द्वारा सूचित किया गया है: जाँच की गई)।
और दूसरी बात यह है कि आपको क्लास के साथ एलिमेंट के लिए बैकग्राउंड बदलना होगा।
जो कि इनपुट इनपुट के तुरंत बाद जाता है।
अक्षम इनपुट के लिए, ये 2 गुण काम नहीं करते हैं।

पूरा कोड

 .switcher { width: 124px; height: 49px; cursor: pointer; position: relative; } .switcher * { transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; } .switcher .sw_btn { background: url('btn.png') 0% 0% no-repeat; width: 49px; height: 49px; display: block; cursor: pointer; z-index: 1; position: relative; } .switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; } .switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; } .switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; } .switcher input.switcher-value { display: none; } .switcher .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }

इसलिए, छोटी-छोटी ट्रिक ~~और आधा लीटर कॉफी के साथ~~ , आप पेज पर जावास्क्रिप्ट एनिमेशन के बिना एक दिलचस्प स्विच बना सकते हैं।

जावास्क्रिप्ट के बिना स्टाइलिश सीएसएस स्विच

More articles: