विस्मयकारी CSS-Only समझौते बनाने के 4 तरीके
सामग्री समझौते एक उपयोगी डिजाइन पैटर्न बनाते हैं। आप उन्हें कई अलग-अलग चीजों के लिए उपयोग कर सकते हैं: मेनू, सूची, चित्र, लेख अंश, पाठ स्निपेट और यहां तक कि वीडियो के लिए
अधिकांश समझौते वहां पर निर्भर हैं जावास्क्रिप्ट, मुख्य रूप से jQuery पर, लेकिन चूंकि उन्नत CSS3 तकनीकों का उपयोग व्यापक हो गया था, इसलिए हम अच्छे उदाहरण भी पा सकते हैं केवल HTML और CSS का उपयोग करें, जो उन्हें अक्षम जावास्क्रिप्ट के साथ वातावरण में सुलभ बनाता है.
CSS-only समझौते बनाना एक मुश्किल काम हो सकता है, इसलिए इस पोस्ट में हम करने की कोशिश करेंगे मुख्य अवधारणा डेवलपर्स का उपयोग तब समझें जब उन्हें एक बनाने की आवश्यकता हो.
CSS-only टैब बनाने में आमतौर पर दो मुख्य दृष्टिकोण होते हैं, उनमें से प्रत्येक में दो लगातार उपयोग के मामले होते हैं। पहला दृष्टिकोण उपयोग करता है छिपे हुए रूप तत्व, जबकि दूसरा उपयोग करता है सीएसएस छद्म चयनकर्ता.
1. रेडियो बटन विधि
रेडियो बटन विधि एक छिपे हुए रेडियो इनपुट और एक संगत लेबल टैग को जोड़ के प्रत्येक टैब में जोड़ता है। तर्क सरल है: जब उपयोगकर्ता एक टैब का चयन करता है, तो वे मूल रूप से उस टैब से संबंधित रेडियो बटन की जांच करते हैं, उसी तरह जब वे एक फॉर्म भरते हैं। जब वे समझौते में अगले टैब पर क्लिक करते हैं, तो वे अगले रेडियो बटन का चयन करते हैं, आदि.
इस विधि में, केवल एक टैब खुला हो सकता है एक ही समय में। HTML का तर्क कुछ इस तरह दिखता है:
सामग्री शीर्षक (यहाँ h1 टैग का उपयोग न करें)
कुछ सामग्री ...
p>
आपको प्रत्येक टैब के लिए एक अलग रेडियो-लेबल जोड़ी जोड़ें समझौते में। अकेले HTML वांछित व्यवहार नहीं देगा, आपको उचित CSS-नियमों को भी जोड़ना होगा, आइए देखें कि आप इसे कैसे पूरा कर सकते हैं.
फिक्स्ड हाइट वर्टिकल टैब्स
इस समाधान में (नीचे स्क्रीनशॉट देखें), डेवलपर ने रेडियो बटन की मदद से छुपाया कुछ भी डिस्प्ले मत करो; नियम, तो उसने लेबल टैग को एक सापेक्ष स्थान दिया जो प्रत्येक टैब का शीर्षक रखता है, और संबंधित को एक पूर्ण स्थिति लेबल: के बाद छद्म तत्व.
उत्तरार्द्ध एक हरे रंग के + चिह्न के साथ चिह्नित हैंडल रखता है जो टैब खोलता है। बंद टैब हरे रंग से चिह्नित एक हैंडल का भी उपयोग करते हैं “-” संकेत। CSS में बंद टैब को तत्व + तत्व चयनकर्ता की मदद से चुना जाता है.
आपको खुले टैब की सामग्री को एक निश्चित ऊंचाई देने की भी आवश्यकता है। ऐसा करने के लिए, तत्व 1 की मदद से खुले टैब (ऊपर HTML में टैब-सामग्री वर्ग के साथ चिह्नित) के शरीर का चयन करें ~ element2 CSS चयनकर्ता.
यहाँ सीएसएस का मूल तर्क निम्नलिखित है:
इनपुट [प्रकार = रेडियो] प्रदर्शन: कोई नहीं; लेबल स्थिति: रिश्तेदार; प्रदर्शन क्षेत्र; लेबल: सामग्री: "+" के बाद; स्थिति: निरपेक्ष; सही: 1em; इनपुट: चेक + लेबल: सामग्री: "-" के बाद; इनपुट: चेक ~ ~ .tab-content ऊंचाई: 150px;
आप यहाँ पर पूरी CSS को देख सकते हैं। CSS को मूल रूप से Sass में लिखा गया है, लेकिन यदि आप पर क्लिक करते हैं “संकलित देखें” बटन, आप संकलित सीएसएस फ़ाइल देख सकते हैं.
रेडियो बटन के साथ छवि प्रत्याशा
यह सुंदर छवि समझौते एक ही रेडियो बटन विधि का उपयोग करता है, लेकिन लेबल के बजाय, यहां डेवलपर अनुमानित HTML टैग का उपयोग किया समझौते के व्यवहार को पूरा करने के लिए.
सीएसएस कुछ अलग है, मुख्य रूप से इस मामले में टैब को लंबवत नहीं बल्कि क्षैतिज रूप से रखा गया है। डेवलपर ने तत्व + तत्व CSS चयनकर्ता का उपयोग किया (जो कि पिछले मामले में टॉगल्स का चयन करने के लिए उपयोग किया गया था) यह सुनिश्चित करने के लिए कि कवर किए गए चित्र के किनारे अभी भी दिखाई देते हैं.
इस सुरुचिपूर्ण सीएसएस-केवल समझौते को कैसे बनाया जाए, इसके बारे में विस्तृत गाइड पढ़ें.
2. चेकबॉक्स विधि
चेकबॉक्स विधि रेडियो बटन के बजाय चेकबॉक्स इनपुट प्रकार का उपयोग करती है। जब उपयोगकर्ता एक टैब का चयन करता है, तो वे मूल रूप से संबंधित चेकबॉक्स की जांच करते हैं.
रेडियो बटन विधि की तुलना में अंतर यह है कि यह है एक ही समय में एक से अधिक टैब खोलने के लिए संभव है, ठीक उसी तरह जैसे किसी फॉर्म के अंदर एक से अधिक चेकबॉक्स की जांच करना संभव है.
जब उपयोगकर्ता किसी अन्य पर क्लिक करता है, तो दूसरी ओर, टैब स्वयं अपने आप बंद नहीं होंगे। HTML का तर्क पहले जैसा ही है, बस इस मामले में आपको इनपुट प्रकार के लिए चेकबॉक्स का उपयोग करने की आवश्यकता है.
सामग्री शीर्षक (यहाँ h1 टैग का उपयोग न करें)
कुछ सामग्री ...
p>
फिक्स्ड हाइट चेकबॉक्स अकॉर्डियन
यदि आप निश्चित ऊंचाई सामग्री टैब चाहते हैं, तो CSS का तर्क रेडियो बटन के मामले में बहुत समान है, यह सिर्फ इनपुट प्रकार रेडियो से चेकबॉक्स में बदल गया है। इस कोडपेन पेन में आप कोड देख सकते हैं.
तरल पदार्थ की ऊँचाई चेकबॉक्स प्रत्यायन
जब एक से अधिक टैब एक ही समय में खुले होते हैं, तो निश्चित ऊंचाई टैब प्रदर्शित करने से उपयोगकर्ता अनुभव को नकारात्मक रूप से प्रभावित किया जा सकता है क्योंकि समझौते की ऊंचाई काफी बढ़ सकती है। यदि आप इसमें सुधार कर सकते हैं निश्चित ऊंचाई को तरल पदार्थ की ऊंचाई में बदल दें; इसका मतलब है कि खुले टैब की ऊंचाई उनके द्वारा धारण की गई सामग्री के आकार के अनुसार विस्तार या सिकुड़ती है.
ऐसा करने के लिए आपको चाहिए टैब सामग्री की निर्धारित ऊंचाई को अधिकतम-ऊँचाई पर संशोधित करें, तथा रिश्तेदार इकाइयों का उपयोग करें:
इनपुट: चेक ~ .tab-content अधिकतम-ऊंचाई: 50em;
यदि आप बेहतर तरीके से समझना चाहते हैं कि यह विधि कैसे काम करती है, तो आप इस कोडपेन पर एक नज़र डाल सकते हैं.
3.: लक्ष्य विधि
: लक्ष्य CSS3 के छद्म चयनकर्ताओं में से एक है। इसकी मदद से आप HTML तत्व को एंकर टैग से निम्नलिखित तरीके से लिंक कर सकते हैं:
टैब का शीर्षक
टैब की सामग्री
जब उपयोगकर्ता एक टैब के शीर्षक पर क्लिक करता है, तो संपूर्ण अनुभाग धन्यवाद के लिए खुल जाएगा : लक्ष्य छद्म चयनकर्ता और URL को निम्न प्रारूप में भी बदला जाएगा: www.some-url.com/#tab-1.
खुले टैब को सीएसएस की मदद से स्टाइल किया जा सकता है अनुभाग: लक्ष्य … राज करते हैं। हम यहाँ पर एक शानदार ट्यूटोरियल हैं, इस बारे में कि आप किस तरह से अच्छा CSS-only समझौते बना सकते हैं : लक्ष्य दोनों ऊर्ध्वाधर और क्षैतिज लेआउट में विधि.
की मुख्य कमी है : लक्ष्य विधि वह है जब उपयोगकर्ता टैब पर क्लिक करता है तो यह URL बदल देता है. यह ब्राउज़र के इतिहास को प्रभावित करता है और ब्राउज़र का पिछला बटन उपयोगकर्ता को पिछले पृष्ठ पर नहीं ले जाएगा, लेकिन समझौते की पिछली स्थिति में ले जाएगा.
4. द: होवर विधि
यदि हम इसका उपयोग करते हैं तो यह बाद की कमी को दूर किया जा सकता है : मंडराना के बजाय सीएसएस छद्म चयनकर्ता : लक्ष्य, लेकिन इस मामले में टैब क्लिक पर नहीं बल्कि हॉवर ईवेंट पर प्रतिक्रिया देंगे। यहाँ चाल है कि आप की जरूरत है या तो अनछुए तत्वों को छिपाएं, या उनकी चौड़ाई या ऊंचाई कम करें - टैब के लेआउट के आधार पर
होवर किए गए तत्व को दृश्यमान बनाने की आवश्यकता है, या समझौते को काम करने के लिए पूरी चौड़ाई / ऊंचाई पर सेट किया जाना चाहिए.
निम्नलिखित 3 सीएसएस-केवल समझौते सभी के साथ किए गए थे: होवर विधि, कोड को देखने के लिए स्क्रीनशॉट के नीचे दिए गए लिंक पर क्लिक करें.
क्षैतिज छवि प्रत्यायन
तिरछी अकड़
डिफ़ॉल्ट राज्य के साथ हॉवर-सक्रिय समझौता
