कस्टम कर्सर क्या है?

कस्टम कर्सर एक उपयोगकर्ता-परिभाषित माउस पॉइंटर है जो ब्राउज़र के डिफ़ॉल्ट तीर या पॉइंटर आइकन को बदल देता है। वेबसाइटें और एप्लिकेशन ब्रांडिंग को मजबूत करने, गेम या रचनात्मक अनुभवों में विसर्जन में सुधार करने, या बस इंटरफेस में एक अद्वितीय दृश्य स्पर्श जोड़ने के लिए कस्टम कर्सर का उपयोग करते हैं। कस्टम कर्सर आमतौर पर CSS में cursor प्रॉपर्टी का उपयोग करके परिभाषित किए जाते हैं जिसमें .cur, .png, या .svg जैसी इमेज फ़ाइल की ओर इशारा करने वाला url() मान होता है।

वेब ब्राउज़र कई कर्सर फ़ाइल फॉर्मेट को नेटिवली सपोर्ट करते हैं। .cur फॉर्मेट क्लासिक Windows कर्सर फॉर्मेट है, .ani एनिमेशन सपोर्ट जोड़ता है, जबकि .png और .svg आधुनिक, रेजोल्यूशन-स्वतंत्र विकल्प प्रदान करते हैं जो सभी प्लेटफॉर्म पर काम करते हैं।

टूल विवरण

Custom Cursor Tester आपको किसी भी कर्सर फ़ाइल को अपलोड करने और तुरंत यह पूर्वावलोकन करने देता है कि यह ब्राउज़र में कैसा दिखता है और व्यवहार करता है। एक बार अपलोड करने के बाद, आपका कर्सर एक समर्पित परीक्षण क्षेत्र के अंदर डिफ़ॉल्ट पॉइंटर को बदल देता है — एक चेकर्ड व्यूपोर्ट एक बटन के साथ — ताकि आप CSS की एक भी पंक्ति लिखे बिना मुक्त-स्थान आंदोलन और होवर व्यवहार दोनों का मूल्यांकन कर सकें।

समर्थित फॉर्मेट

फॉर्मेट विवरण
.cur Windows कर्सर फॉर्मेट, व्यापक रूप से समर्थित
.ani एनिमेटेड Windows कर्सर
.png रास्टर इमेज, उच्च-गुणवत्ता कर्सर के लिए आदर्श
.svg स्केलेबल वेक्टर इमेज, किसी भी आकार पर तीव्र
.ico Windows आइकन फॉर्मेट, कर्सर के रूप में भी उपयोगी

विशेषताएं

  • तत्काल पूर्वावलोकन: कर्सर फ़ाइल अपलोड होते ही लाइव लागू होता है — कोई पृष्ठ पुनः लोड की आवश्यकता नहीं
  • इंटरैक्टिव परीक्षण क्षेत्र: चेकर्ड व्यूपोर्ट स्पष्ट दृश्यता के लिए एक तटस्थ पृष्ठभूमि पर कर्सर दिखाता है
  • बटन परीक्षण लक्ष्य: परीक्षण क्षेत्र के अंदर एक बटन आपको इंटरैक्टिव तत्वों पर कर्सर व्यवहार को सत्यापित करने देता है
  • सुसंगत कर्सर विरासत: बटन कस्टम कर्सर को विरासत में देता है बजाय ब्राउज़र डिफ़ॉल्ट में वापस आने के
  • केवल क्लाइंट-साइड: फ़ाइलें सीधे ब्राउज़र में पढ़ी जाती हैं और कभी किसी सर्वर पर अपलोड नहीं की जाती हैं

उपयोग के मामले

  • कर्सर डिजाइनर: यह सत्यापित करें कि नई बनाई गई .cur या .png कर्सर फ़ाइल इसे भेजने से पहले कैसी दिखती है
  • वेब डेवलपर: cursor: url(...) प्रॉपर्टी के साथ CSS में एकीकृत करने से पहले एक कर्सर एसेट को तुरंत परीक्षण करें
  • गेम और रचनात्मक डेवलपर: इंटरैक्टिव UI संदर्भों में कस्टम पॉइंटर की अनुभूति और दृश्यता की जांच करें

यह कैसे काम करता है

जब आप एक फ़ाइल अपलोड करते हैं, तो टूल ब्राउज़र के URL.createObjectURL() API का उपयोग करके इसके लिए एक ऑब्जेक्ट URL बनाता है और इसे परीक्षण क्षेत्र पर CSS cursor स्टाइल के रूप में इंजेक्ट करता है। यह स्टाइलशीट में cursor: url(your-file.cur), auto लिखने के बराबर है। फॉलबैक auto सुनिश्चित करता है कि यदि फ़ाइल लोड या पार्स नहीं की जा सकती है तो ब्राउज़र अपने डिफ़ॉल्ट कर्सर का उपयोग करता है।

सुझाव

  • .png कर्सर के लिए, ब्राउज़र डिफ़ॉल्ट रूप से ऊपरी-बाएं कोने (0 0) को हॉटस्पॉट के रूप में उपयोग करता है। यदि आपके कर्सर का सक्रिय बिंदु कहीं और होना चाहिए (उदाहरण के लिए एक पेंसिल की नोक), तो आपको परीक्षण के बाद अपने CSS में इसे समायोजित करने की आवश्यकता हो सकती है।
  • एनिमेटेड .ani कर्सर उन ब्राउज़रों में स्वचालित रूप से चलते हैं जो उन्हें सपोर्ट करते हैं (मुख्य रूप से Chromium-आधारित)।
  • SVG कर्सर को छोटा होना चाहिए (आमतौर पर 128×128 px से कम) ताकि अधिकांश ब्राउज़रों में कर्सर के रूप में सही तरीके से रेंडर हो सकें।