टेलविंड में होवर, फोकस और अन्य राज्यों का उपयोग कैसे करें?

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

यह मार्गदर्शिका टेलविंड में होवर, फ़ोकस और अन्य स्थितियों का उपयोग प्रदान करती है।

टेलविंड में होवर, फोकस और अन्य राज्यों का उपयोग कैसे करें?

वेब पेज डिज़ाइन करते समय, उपयोगकर्ताओं के साथ अन्तरक्रियाशीलता बनाए रखने के लिए गतिशील और आकर्षक तत्वों को जोड़ना आवश्यक है। टेलविंड की सुविधाओं का उपयोग अतिरिक्त कस्टम सीएसएस लिखे बिना इंटरैक्टिव और गतिशील पेज बनाने के लिए किया जा सकता है। कुछ विशेषताएं 'होवर', 'फ़ोकस' और 'सक्रिय' हैं जो डिज़ाइन में आकर्षण जोड़ने में मदद करती हैं।

HTML में होवर वैरिएंट का उपयोग करना

जब उपयोगकर्ता किसी विशिष्ट तत्व पर माउस कर्सर ले जाता है तो होवर प्रॉपर्टी का उपयोग HTML तत्व को स्टाइल करने के लिए किया जाता है। यह एक सहज अनुभव प्रस्तुत करने में मदद करता है।

चरण 1: HTML में 'होवर' प्रॉपर्टी लागू करें
एक HTML फ़ाइल बनाएं और कोड में कुछ तत्व पर होवर प्रॉपर्टी लागू करें। अंदाजा लगाने के लिए नीचे दिए गए कोड पर एक नजर डालें:

इस कोड में:

• एक बटन जिसका नाम ' मुझ पर मंडराओ! बटन टैग द्वारा बनाया गया है।
• “ बीजी-हरा-500 'बटन का पृष्ठभूमि रंग हरा पर सेट करता है।
• “ होवर: बीजी-ब्लू-500 जब माउस को इसके ऊपर ले जाया जाता है तो बटन का रंग हरे से नीला हो जाता है।
• बटन में टेक्स्ट का रंग सफेद है” पाठ-सफ़ेद ' और ' फ़ॉन्ट बोल्ड फ़ॉन्ट को बोल्ड बनाता है।
• बटन का आकार ' द्वारा गोल करने के लिए सेट किया गया है गोल ”।

चरण 2: आउटपुट का पूर्वावलोकन करें
उपरोक्त कोड को निष्पादित करने के बाद, अंतिम दृश्य इस तरह दिखता है:

यह देखा जा सकता है कि जब बटन पर माउस कर्सर ले जाया जाता है तो बटन का रंग बदल जाता है।

HTML में फोकस वैरिएंट का उपयोग करना

फोकस प्रॉपर्टी का उपयोग HTML तत्वों को स्टाइल करने के लिए किया जाता है ताकि जब उपयोगकर्ता तत्व पर क्लिक करता है तो यह उपयोगकर्ता का ध्यान आकर्षित करने के लिए हाइलाइट हो जाता है।

चरण 1: HTML कोड में फोकस प्रॉपर्टी लागू करें
एक HTML फ़ाइल बनाएं और फ़ोकस प्रॉपर्टी को किसी वांछित तत्व पर लागू करें। इंप्रेशन पाने के लिए नीचे दिए गए कोड पर विचार करें:

इस कोड में:

• “ मोड़ना क्लास एक फ्लेक्स बनाता है।
• “ औचित्य-केंद्र ” केंद्र में सामग्री संरेखण को उचित ठहराता है।
• “ आइटम-केंद्र क्लास ऑब्जेक्ट को स्क्रीन के केंद्र में समायोजित करता है।
• “ h-स्क्रीन 'व्यूपोर्ट के अनुसार स्क्रीन का आकार सेट करता है।
• “ बीजी-ब्लू-200 'पृष्ठभूमि का रंग नीला पर सेट करता है।
• टेक्स्ट प्रकार का एक इनपुट बॉक्स बनाया जाता है।
• “ फोकस: बीजी-ग्रीन-300 उपयोगकर्ता द्वारा क्लिक करने पर इनपुट बॉक्स का रंग हरा हो जाता है।
• “ w-64 चौड़ाई को 64px पर सेट करता है।
• “ एच-10 ऊंचाई को 10px पर सेट करता है।
• “ पीएक्स-4 शीर्ष और बाईं ओर 4px की पैडिंग जोड़ता है।
• “ पाई-2 ऊपर और नीचे 2px की पैडिंग जोड़ता है।

चरण 2: फोकस संपत्ति का पूर्वावलोकन करें
HTML कोड को सेव करें और उसके द्वारा बनाए गए वेबपेज को खोलें। फिर कर्सर को इनपुट बॉक्स पर ले जाएं और उस पर क्लिक करें और नीचे दिया गया परिवर्तन होगा:

HTML में एक्टिव वेरिएंट का उपयोग करना

इस प्रॉपर्टी का उपयोग उस स्थिति के लिए तत्वों को स्टाइल करने के लिए किया जाता है जब उपयोगकर्ता गतिशील रूप से तत्व पर टैप करता है। सक्रिय स्थिति कर्सर के सक्रियण चरण और उसकी जारी स्थिति से समय अवधि है।

वाक्य - विन्यास

विशिष्ट सीएसएस गुण चयनित तत्व पर लागू हो जाता है।

चरण 1: HTML कोड में एक्टिव वेरिएंट लागू करें
एक HTML फ़ाइल बनाएं और सक्रिय प्रॉपर्टी को कुछ तत्व पर लागू करें जो नीचे दिए गए मामले में एक बटन है:

इस कोड में:

• “ बीजी-हरा-600 'पृष्ठभूमि का रंग हरा पर सेट करता है।
• “ पी 4 ” 4px की पैडिंग जोड़ता है।
• “ गोलाकार-एमडी बटन का आकार गोलाकार बनाता है।
• “ संक्रमण-परिवर्तन ' का उपयोग बटन को छोटी समय अवधि के लिए बदलने के लिए किया जाता है जो ' द्वारा निर्धारित किया जाता है अवधि-400 परिवर्तन ”।
• “ सक्रिय:स्केल-110 बटन को बड़े आकार में बदल देता है।

चरण 2: आउटपुट का पूर्वावलोकन करें
उपरोक्त कोड को HTML फ़ाइल में सहेजें और इसके द्वारा बनाए गए वेबपेज का पूर्वावलोकन करें। वेब पेज इस प्रकार दिखेगा:

यह देखा जा सकता है कि जब माउस इसे पकड़ता है तो बटन का आकार बढ़ जाता है और जैसे ही इसे छोड़ा जाता है यह अपनी प्रारंभिक स्थिति में वापस आ जाता है।

निष्कर्ष

टेलविंड में होवर, फ़ोकस और अन्य स्थितियों का उपयोग करने के लिए, 'होवर' जैसे पूर्वनिर्धारित राज्य वर्गों का उपयोग करें और इसमें कुछ स्टाइलिंग गुण लागू करें जैसे कि रंग बदलना, फ़ोकस रिंग बनाना, इत्यादि। डिस्प्ले उपयोगिताओं का उपयोग स्केलेबल आउटपुट प्रस्तुत करने के लिए किया जाता है। इस राइटअप ने टेलविंड में होवर, फोकस और अन्य स्थितियों का उपयोग करने की विधि का प्रदर्शन किया है।