टास्क पथ / इनपुट से परिणाम तक
शुद्ध-CSS स्विच कैसे डिज़ाइन करें
- 01
ट्रैक का आकार तय करें
ट्रैक की चौड़ाई 44 से 128 px के बीच और ट्रैक की ऊंचाई 24 से 64 px के बीच सेट करें। चौड़ाई ऊंचाई से कम से कम 8 px ज़्यादा होनी चाहिए ताकि थंब के पास चलने की जगह हो। 64 × 34 px डिफ़ॉल्ट ज़्यादातर मोबाइल स्विचों के अनुपात से मेल खाता है। 18 टेम्पलेट · चयनित · रंग
- 02
थंब बैठाएं
थंब साइज़ 16 से 56 px के बीच चुनें। उसे ट्रैक के अंदर बैठना चाहिए — ट्रैक की ऊंचाई से 4 px कम से ज़्यादा नहीं — वरना स्थिति मान जांचें पर बदल जाती है, उस सटीक नियम के साथ जो विफल हुआ।
- 03
दोनों स्थितियों को रंगें
ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: बंद स्थिति के लिए निष्क्रिय ट्रैक और चालू स्थिति के लिए सक्रिय ट्रैक चुनें। थंब खुद छोटी मुलायम शैडो के साथ सफ़ेद रहता है, इसलिए दोनों ट्रैक रंगों को सिर्फ़ सफ़ेद के साथ कंट्रास्ट बनाना है।
- 04
ट्रांज़िशन का पूर्वावलोकन करें
ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: थंब को स्लाइड होते और ट्रैक को असली 180 ms ease टाइमिंग पर रंग बदलते देखने के लिए सक्रिय स्थिति दिखाएं टॉगल करें। थंब के आसपास की पैडिंग बची हुई ट्रैक ऊंचाई के आधे के रूप में गिनी जाती है, इसलिए आप जो भी साइज़ चुनें, फिट समान रहता है।
- 05
CSS कॉपी या डाउनलोड करें
toolars-switch.css सहेजने के लिए CSS कॉपी करें या .css डाउनलोड करें दबाएं। सफ़ेद थंब दोनों स्थितियों के बीच गिनी हुई दूरी तय करता है, और एक्सपोर्ट में शुरू से ही फ़ोकस व reduced-motion हैंडलिंग शामिल है। आउटपुट पैनल लाइव बाइट गिनती दिखाता है, ताकि आप देख सकें कि कंपोनेंट कितना कॉम्पैक्ट रहता है।
- 06
मार्कअप जोड़ें
एक .switch रैपर के अंदर चेकबॉक्स input के बाद .switch-track एलिमेंट रखें, ठीक इसी क्रम में — सिबलिंग सेलेक्टर इसी पर निर्भर है। input अदृश्य 1 px बॉक्स में सिकुड़ जाता है लेकिन फ़ोकस योग्य रहता है, और फ़ोकस आपके सक्रिय ट्रैक रंग में 3 px आउटलाइन खींचता है। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।