कर्सर स्क्रीन पर उस स्थिति को इंगित करता है जहां उपयोगकर्ता क्लिक कर सकता है या पाठ दर्ज कर सकता है। विभिन्न वेबसाइट घटकों के लिए उपयोग किए जाने वाले विभिन्न कर्सर हो सकते हैं। एक डेवलपर को यह सुनिश्चित करना चाहिए कि एप्लिकेशन में उपयोग किए जाने वाले कर्सर आकर्षक होने चाहिए। उदाहरण के लिए, माउस होवर पर बटन पर एक पॉइंटिंग हैंड कर्सर का उपयोग किया जा सकता है। टेक्स्ट बॉक्स पर टेक्स्ट (ब्लिंकिंग लाइन) इंडिकेटर का उपयोग किया जाता है जहां टेक्स्ट दर्ज किया जाना है।
CSS में कई कर्सर शैलियाँ हैं जिनका उपयोग केवल कर्सर संपत्ति के मान को निर्दिष्ट करके किया जाता है। हालाँकि, एक डेवलपर CSS का उपयोग करके एक अनुकूलित कर्सर बना सकता है।
यह अध्ययन मार्गदर्शिका प्रदान करेगी:
-
- सीएसएस कर्सर
- कस्टम कर्सर सीएसएस
विषय पर जाने से पहले, आइए व्यावहारिक उदाहरण के साथ कुछ CSS कर्सर आकृतियों को देखें।
सीएसएस कर्सर
सीएसएस ' कर्सर ” संपत्ति के अलग-अलग मूल्य हैं, जैसे कि एक सूचक, कोई नहीं, प्रगति, और बहुत कुछ। चलिए एक तालिका बनाते हैं जिसमें पंक्तियाँ होती हैं जिन पर माउस होवर करने पर विभिन्न कर्सर प्रदर्शित होंगे।
उदाहरण: HTML में विभिन्न CSS कर्सर का प्रतिनिधित्व करने वाली तालिका बनाना
सबसे पहले, HTML में <टेबल> तत्व जोड़ें। इस तत्व के अंदर:
-
- पंक्तियों को बनाने के लिए
टैग का उपयोग किया जाएगा। - पहली पंक्ति में शीर्षक हैं।
- ये शीर्षक
टैग का उपयोग करके निर्दिष्ट किए गए हैं। अन्य टैग में दो टैग होते हैं जो डेटा के साथ कॉलम को भरने के लिए होते हैं। - दूसरा
टैग उन बटन तत्वों का प्रतिनिधित्व करता है जो CSS के साथ लागू होते हैं ' कर्सर ' विभिन्न मूल्यों वाली संपत्ति। उपरोक्त परिदृश्य के लिए HTML कोड नीचे दिया गया है:
< मेज़ >
< टीआर >
< वां शैली = 'चौड़ाई: 200 पीएक्स;' > सीएसएस कर्सर चयनकर्ता वां >
< वां शैली = 'चौड़ाई: 200 पीएक्स;' > कर्सर शैली वां >
टीआर >
< टीआर >
< टीडी > कर्सर: सूचक टीडी >
< टीडी < बटन शैली = 'कर्सर: सूचक;' > सूचक बटन >> टीडी >
टीआर >
< टीआर >
< टीडी > कर्सर: प्रगति टीडी >
< टीडी < बटन शैली = 'कर्सर: प्रगति;' > प्रगति बटन >> टीडी >
टीआर >
< टीआर >
< टीडी > कर्सर: अनुमति नहीं है टीडी >
< टीडी < बटन शैली = 'कर्सर: अनुमत नहीं है;' > अनुमति नहीं बटन >> टीडी >
टीआर >
< टीआर >
< टीडी > कर्सर: कोई नहीं टीडी >
< टीडी < बटन शैली = 'कर्सर: कोई नहीं;' > कोई भी नहीं बटन >> टीडी >
टीआर >
< टीआर >
< टीडी > कर्सर: ले जाएँ टीडी >
< टीडी < बटन शैली = 'कर्सर: हटो;' > कदम बटन >> टीडी >
टीआर >
< टीआर >
< टीडी > कर्सर: पकड़ो टीडी >
< टीडी < बटन शैली = 'कर्सर: ग्रैब;' > पकड़ना बटन >> टीडी >
टीआर >
< टीआर >
< टीडी > कर्सर: कॉपी टीडी >
< टीडी < बटन शैली = 'कर्सर: कॉपी;' > प्रतिलिपि बटन >> टीडी >
टीआर >
< टीआर >
< टीडी > कर्सर: कॉल-आकार बदलें टीडी >
< टीडी < बटन शैली = 'कर्सर: कॉल-आकार बदलें;' > कर्नल का आकार बदलें बटन >> टीडी >
टीआर >
< टीआर >
< टीडी > कर्सर: पंक्ति-आकार टीडी >
< टीडी < बटन शैली = 'कर्सर: पंक्ति-आकार बदलें;' > पंक्ति-आकार बटन >> टीडी >
टीआर >
< टीआर >
< टीडी > कर्सर: पाठ टीडी >
< टीडी < बटन शैली = 'कर्सर: पाठ;' > मूलपाठ बटन >> टीडी >
टीआर >
मेज़ >
उपरोक्त कोड निम्नलिखित परिणाम उत्पन्न करेगा:
अगले भाग में, हम HTML तत्वों पर विभिन्न शैलियों को लागू करेंगे।शैली 'सभी' तत्व
* {
गद्दी: 0 ;
अंतर: 0 ;
फ़ॉन्ट-फ़ैमिली: एरियल, हेल्वेटिका, सेन्स-सेरिफ़;
}
सभी HTML तत्व CSS शैलियों के साथ लागू होते हैं जिन्हें नीचे समझाया गया है:-
- ' गद्दी 'के साथ संपत्ति' 0 ” मूल्य में तत्व की सामग्री के आसपास कोई स्थान नहीं है।
- ' अंतर 'के साथ संपत्ति' 0 ” मूल्य प्रत्येक तत्व के बाहर कोई स्थान नहीं जोड़ता है।
- ' फुहारा परिवार 'संपत्ति को एक मूल्य सौंपा गया है' एरियल, हेल्वेटिका, सेन्स-सेरिफ़ ”। फ़ॉन्ट शैलियों की सूची यह सुनिश्चित करने के लिए दी गई है कि यदि पहली शैली ब्राउज़र द्वारा समर्थित नहीं है, तो अन्य शैलियों को लागू किया जाना चाहिए।
शैली 'टेबल' तत्व
मेज़ {
मार्जिन: 0 पीएक्स ऑटो;
बॉर्डर: 1px सॉलिड गेन्सबोरो;
}
HTML तालिका तत्व नीचे वर्णित सीएसएस गुणों के साथ लागू किया गया है:-
- ' सीमा 'संपत्ति मूल्य के साथ सेट है' 1 पीएक्स ठोस गेनबोरो ” जो क्रमशः बॉर्डर की चौड़ाई, बॉर्डर शैली और बॉर्डर के रंग का प्रतिनिधित्व करता है।
' अंतर ' संपत्ति ऊपर बताए अनुसार व्यवहार करती है।
शैली 'टीडी' तत्व
टीडी {
पाठ-संरेखण: केंद्र;
}
तत्व संपत्ति के साथ लागू किया जाता है ' पाठ संरेखित 'मूल्य के साथ' केंद्र ”। यह कॉलम के पाठ को केंद्र में संरेखित करेगा। शैली 'बटन' तत्व
बटन {
पृष्ठभूमि-रंग: कैडेटनीला;
गद्दी: 10px 10px;
रंग: #fffff;
चौड़ाई: 150 पीएक्स;
}
उपरोक्त एचटीएमएल कोड में प्रयुक्त बटन तत्व को नए सीएसएस गुणों के साथ स्टाइल किया गया है जिन्हें नीचे समझाया गया है:-
- ' पीछे का रंग 'तत्व की पृष्ठभूमि के लिए रंग निर्दिष्ट करता है।
- ' गद्दी 'के रूप में असाइन किए गए मानों के साथ' 10 पीएक्स 10 पीएक्स ” ऊपर-नीचे 10px की जगह और तत्व के आइटम के बाएँ-दाएँ पक्ष में 10px जोड़ता है।
- ' रंग ” तत्व के फ़ॉन्ट रंग को समायोजित करता है।
- ' चौड़ाई ” वह संपत्ति है जो तत्व की चौड़ाई को समायोजित करती है।
उपरोक्त कोड निम्नलिखित परिणाम उत्पन्न करेगा:
अब तक हमने CSS द्वारा प्रदान किए जाने वाले कर्सर की चर्चा की है। आगामी अनुभाग में, उदाहरण वर्णन करेगा कि CSS के साथ एक कस्टम कर्सर कैसे बनाया जाए।कस्टम कर्सर सीएसएस
डेवलपर्स को अपने अनुप्रयोगों के लिए उपयुक्त कर्सर का उपयोग करना चाहिए। उपयोगकर्ताओं का ध्यान आकर्षित करने के लिए कर्सर को आकर्षक बनाया जाना चाहिए। इसके अलावा, इस उद्देश्य के लिए कस्टम कर्सर बनाया जा सकता है।
नीचे दिए गए उदाहरण को देखें!
उदाहरण: CSS के साथ कस्टम कर्सर कैसे बनाएं?
HTML में, दो div एलिमेंट्स जोड़ें। कक्षा के साथ एक ' घेरा 'और दूसरा वर्ग के साथ' बिंदु ”।
एचटीएमएल
< डिव कक्षा = 'घेरा' >> डिव >
< डिव कक्षा = 'बिंदु' >> डिव >
चलिए CSS सेक्शन की ओर बढ़ते हैं।शैली 'शरीर' तत्व
तन {
ऊंचाई: 100 वीएच;
}
HTML फ़ाइल का मुख्य तत्व शैली के साथ लागू किया जाता है ' ऊंचाई तत्व की ऊंचाई निर्धारित करने के लिए संपत्ति।स्टाइल 'सर्कल' डिव
।घेरा {
चौड़ाई: 20 पीएक्स;
ऊंचाई: 20 पीएक्स;
बॉर्डर: 2px ठोस सफ़ेद;
सीमा-त्रिज्या: पचास % ;
}
नीचे CSS गुणों की व्याख्या दी गई है जो वर्ग वाले div तत्व पर लागू होते हैं “ घेरा ':-
- ' चौड़ाई ” संपत्ति तत्व की चौड़ाई को समायोजित करती है।
- ' सीमा ' के रूप में निर्दिष्ट मूल्य के साथ संपत्ति ' 2px ठोस सफेद ” बॉर्डर की चौड़ाई, बॉर्डर शैली और रंग का प्रतिनिधित्व करता है।
- ' बॉर्डर-त्रिज्या ” संपत्ति तत्व के बॉर्डर को बदल देती है।
शैली 'बिंदु' div
।बिंदु {
चौड़ाई: 5 पीएक्स;
ऊंचाई: 5 पीएक्स;
पृष्ठभूमि-रंग: सफेद;
सीमा-त्रिज्या: पचास % ;
}
वर्ग बिंदु के साथ div तत्व विभिन्न गुणों के साथ प्रदान किया गया है जो नीचे वर्णित हैं:-
- ' पीछे का रंग ' संपत्ति तत्व की पृष्ठभूमि का रंग निर्दिष्ट करती है।
- ' बॉर्डर-त्रिज्या 'तत्व के किनारों को गोल सेट करता है।
- अन्य गुण चर्चा के अनुसार ही काम करेंगे।
दिया गया कोड वेब पेज पर निम्न कर्सर प्रदर्शित करेगा:
हमने HTML और CSS का उपयोग करके कर्सर बनाया है। अब, अगले भाग में, कर्सर में आवश्यक कार्यक्षमता जोड़ने के लिए जावास्क्रिप्ट कोड लिखा गया है।जावास्क्रिप्ट
< लिखी हुई कहानी >
const कर्सर सर्किल = document.querySelector ( '।घेरा' ) ;
const कर्सरपॉइंट = document.querySelector ( '।बिंदु' ) ;
कॉन्स्ट मूव कर्सर = ( और ) = > {
const माउसY = e.clientY;
const माउसएक्स = ई.क्लाइंटएक्स;
कर्सर सर्किल.स्टाइल.ट्रांसफॉर्म = ` अनुवाद करना ( ${माउसएक्स} पीएक्स, ${mouseY} पिक्सल ) ` ;
कर्सरपॉइंट.स्टाइल.ट्रांसफॉर्म = ` अनुवाद करना ( ${माउसएक्स} पीएक्स, ${mouseY} पिक्सल ) ` ;
}
window.addEventListener ( 'मूसमोव' , कर्सर ले जाएँ )
लिखी हुई कहानी >
उपरोक्त जावास्क्रिप्ट कोड का विवरण नीचे दिया गया है:-
- ' <स्क्रिप्ट> ” टैग को टैग के साथ जोड़ा जाता है, जिसका उपयोग जावास्क्रिप्ट कोड लिखने के लिए किया जाता है।
- ' स्थिरांक ”कीवर्ड यह पहचानता है कि कॉन्स्टेबल कीवर्ड के बाद वेरिएबल को फिर से असाइन नहीं किया जा सकता है।
- ' document.querySelector('.circle') ”दस्तावेज़ में निर्दिष्ट चयनकर्ता से मेल खाने वाला सर्कल div तत्व लौटाता है।
- ' document.querySelector('.point') ” बिंदु div तत्व लौटाता है जो दस्तावेज़ में निर्दिष्ट चयनकर्ता से मेल खाता है।
- ' कॉन्स्ट मूव कर्सर = (ई) => ” यह फ़ंक्शन कर्सर फ़ंक्शन को निर्दिष्ट करता है।
- ' ई. क्लाइंट वाई जब माउस ईवेंट ट्रिगर किया गया था, तो वर्टिकल कोऑर्डिनेट लौटाता है।
- ' ई.क्लाइंटएक्स ' माउस ईवेंट ट्रिगर होने पर क्षैतिज समन्वय लौटाता है।
- ' कर्सर सर्किल.स्टाइल.ट्रांसफॉर्म ”सर्कल डिव को स्टाइल ट्रांसफॉर्मेशन के साथ लागू किया जाता है।
- ' कर्सरपॉइंट.स्टाइल.ट्रांसफॉर्म 'बिंदु div को शैली परिवर्तन के साथ लागू किया जाता है।
- ' अनुवाद(${mouseX}px, ${mouseY}px) 'रूपांतरण संपत्ति का मूल्य क्षैतिज और ऊर्ध्वाधर निर्देशांक सेट करता है।
- ' window.addEventListener ('माउस', मूव कर्सर) 'घटना श्रोता विधि माउस आंदोलन सुनेंगे। यह वैश्विक विंडो ऑब्जेक्ट का हिस्सा है।
उपरोक्त कोड ब्लॉक प्रदान करने के बाद, कर्सर स्वचालित रूप से स्क्रीन पर चला जाएगा जैसा कि नीचे दिखाया गया है:
यह अच्छा है! हमने अलग-अलग CSS गुणों के साथ एक कस्टम कर्सर बनाया है।निष्कर्ष
सीएसएस ' कर्सर ” संपत्ति में कई मान होते हैं जो विभिन्न कर्सर शैलियों को इंगित करते हैं। हालाँकि, HTML तत्वों और CSS गुणों का उपयोग करके, हम अनुकूलित कर्सर बना सकते हैं। फिर, इसकी कार्यक्षमता को सक्रिय करने के लिए जावास्क्रिप्ट कोड लागू किया जाता है। इस अध्ययन ने प्रदर्शित किया है कि एक व्यावहारिक उदाहरण के साथ कस्टम CSS कर्सर कैसे बनाए जाते हैं।
- पंक्तियों को बनाने के लिए