बॉर्डर रेडियस जेनरेटर

बॉर्डर रेडियस जेनरेटर क्या करता है

यह टूल आपको किसी बॉक्स के कोनों के घुमाव (राउंडनेस) को आसानी से एडजस्ट करने की सुविधा देता है। आप प्रत्येक कोने को व्यक्तिगत रूप से नियंत्रित कर सकते हैं या उन्हें आपस में लिंक कर सकते हैं, और अपनी पसंद के अनुसार पिक्सेल (px) या प्रतिशत (%) यूनिट चुन सकते हैं। इसके अतिरिक्त, यह टूल एक अंडाकार कोने (elliptical mode) का विकल्प भी प्रदान करता है, जिससे आप प्रत्येक कोने को अलग हॉरिज़ॉन्टल और वर्टिकल रेडियस देकर अधिक मुलायम और प्राकृतिक आकृतियाँ (organic shapes) बना सकते हैं। आपके द्वारा किए गए बदलावों के आधार पर, यह टूल तुरंत संबंधित CSS कोड जेनरेट कर देता है।

प्रारंभिक रूप से स्लाइडर की वैल्यू 24 पर सेट होती है, जिससे border-radius: 24px; कोड प्राप्त होता है।

टूल के इनपुट और नियंत्रण विकल्प

इस टूल में डिज़ाइन को कस्टमाइज़ करने के लिए निम्नलिखित इनपुट विकल्प दिए गए हैं:

• स्लाइडर: कोनों के घुमाव को एडजस्ट करने के लिए स्लाइडर दिए गए हैं, जिनकी रेंज 0 से 100 तक होती है।
  • जब सभी कोने लिंक होते हैं, तो सभी कोने नामक एक ही स्लाइडर से चारों कोनों को नियंत्रित किया जाता है।
  • जब कोनों का लिंक हटा दिया जाता है, तो चार अलग-अलग स्लाइडर उपलब्ध होते हैं, जो घड़ी की दिशा में काम करते हैं: ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ, और नीचे-बाएँ।
  • अंडाकार कोने मोड चालू होने पर, प्रत्येक कोने के लिए एक हॉरिज़ॉन्टल और एक वर्टिकल स्लाइडर भी मिल जाता है।
• यूनिट: आप अपनी आवश्यकतानुसार px (पिक्सेल) और % (प्रतिशत) यूनिट के बीच स्विच कर सकते हैं।
• सभी कोने लिंक करें: इस टॉगल की मदद से आप कोनों के एडजस्टमेंट को एक साथ जोड़ या अलग कर सकते हैं।
• अंडाकार कोने: इस टॉगल का उपयोग अंडाकार मोड को चालू या बंद करने के लिए किया जाता है।
• प्रीसेट: त्वरित डिज़ाइन के लिए यहाँ कुछ बटन दिए गए हैं, जिनमें नुकीला, गोल, गोला, ब्लॉब, और पत्ती शामिल हैं।

टूल के आउटपुट

बॉर्डर रेडियस जेनरेटर आपको निम्नलिखित आउटपुट प्रदान करता है:

• प्रिव्यू: यहाँ आपको उस बॉक्स का लाइव विज़ुअल दिखाई देता है जिस पर बॉर्डर रेडियस लागू किया गया है।
• CSS: जेनरेट किया गया CSS कोड सीधे CSS हेडिंग के नीचे प्रदर्शित होता है।
• CSS कॉपी करें बटन: इस बटन पर क्लिक करके आप जेनरेट किए गए CSS कोड को तुरंत कॉपी कर सकते हैं।

पिक्सेल और प्रतिशत यूनिट में अंतर

बॉर्डर रेडियस सेट करते समय यूनिट का चयन महत्वपूर्ण भूमिका निभाता है:

• पिक्सेल (px) यूनिट: इस यूनिट में कोनों का घुमाव एक निश्चित मात्रा में तय होता है।
• प्रतिशत (%) यूनिट: इस यूनिट में कोनों का घुमाव बॉक्स के आकार के सापेक्ष होता है। इसमें हॉरिज़ॉन्टल प्रतिशत बॉक्स की चौड़ाई के अनुसार काम करता है और वर्टिकल प्रतिशत बॉक्स की ऊँचाई के अनुसार काम करता है। उदाहरण के लिए, यदि आप एक वर्गाकार (square) बॉक्स के सभी कोनों को प्रतिशत यूनिट में 50% पर सेट करते हैं, तो वह बॉक्स एक पूर्ण गोले में बदल जाता है।

अंडाकार कोने (Elliptical Mode) और CSS कोड का प्रारूप

जब अंडाकार कोने का मोड बंद होता है, तो प्रत्येक कोना एक ही रेडियस वाला चौथाई-गोला (quarter-circle) होता है। लेकिन जब आप अंडाकार कोने मोड को चालू करते हैं, तो प्रत्येक कोने को एक अलग हॉरिज़ॉन्टल और वर्टिकल रेडियस मिलता है।

इस मोड के सक्रिय होने पर, जेनरेटर CSS के लिए दो-वैल्यू वाला स्लैश (slash) फ़ॉर्म लिखता है। जैसे ही कोने वापस सामान्य रूप से गोल हो जाते हैं, यह स्वतः ही छोटे फ़ॉर्म (short form) पर वापस आ जाता है।

विशेष आकृतियाँ बनाने के नियम

इस टूल की मदद से आप कुछ विशिष्ट आकृतियाँ आसानी से बना सकते हैं:

• परफेक्ट गोला बनाना: इसके लिए सभी कोनों को आपस में लिंक करें, यूनिट को प्रतिशत (%) पर स्विच करें, और स्लाइडर को 50% पर सेट करें। इसके अतिरिक्त, आप सीधे गोला प्रीसेट बटन पर क्लिक करके भी सभी कोनों को 50% पर सेट कर सकते हैं।
• पिल-शेप (Pill-shaped) बटन बनाना: इसके लिए यूनिट को पिक्सेल (px) में रखें और किसी भी कोने के स्लाइडर को बटन की आधी ऊँचाई से आगे तक खींचें। ऐसा करने से बटन की चौड़ाई चाहे जो भी हो, उसके किनारे पूरी तरह से गोल बने रहेंगे।

गोपनीयता और डेटा प्रोसेसिंग

इस टूल का उपयोग करते समय आपकी गोपनीयता पूरी तरह सुरक्षित रहती है। हर एक कोना सीधे आपके अपने वेब ब्राउज़र में ही ड्रा किया जाता है। आप यहाँ जो भी डिज़ाइन या वैल्यू सेट करते हैं, उसमें से कुछ भी BroBroGo पर अपलोड नहीं किया जाता है।

इस टूल की उपयोगिता किसके लिए है?

यह टूल उन सभी लोगों के लिए उपयोगी है जो:

• वेब डिज़ाइन के लिए किसी बॉक्स के कोनों को तुरंत गोल करना चाहते हैं।
• किसी वर्गाकार एलिमेंट से एक परफेक्ट गोला तैयार करना चाहते हैं।
• पिल-शेप वाले बटन का डिज़ाइन तैयार कर रहे हैं।
• अपने डिज़ाइन के लिए मुलायम और प्राकृतिक "ब्लॉब" आकृतियाँ बनाना चाहते हैं।
• कस्टम बॉर्डर रेडियस के लिए बिना किसी परेशानी के CSS कोड जेनरेट करना चाहते हैं।

सामान्य प्रश्न (FAQ)

चारों कोने और px बनाम % कैसे काम करते हैं?

चारों स्लाइडर घड़ी की दिशा में ऊपर-बाएँ, ऊपर-दाएँ, नीचे-दाएँ और नीचे-बाएँ कोनों से जुड़े हैं। px में कोना एक तय पिक्सेल जितना गोल होता है; % में यह एलिमेंट के हिसाब से गोल होता है — हॉरिज़ॉन्टल % चौड़ाई से और वर्टिकल % ऊँचाई से चलता है, इसलिए 50% पर चौकोर बॉक्स गोल बन जाता है।

अंडाकार मोड क्या करता है?

बंद होने पर हर कोना एक ही रेडियस वाला चौथाई-गोला होता है। ऑन करने पर हर कोने को अलग हॉरिज़ॉन्टल और वर्टिकल रेडियस मिलता है, और इसी से मुलायम, बहती हुई “blob” शेप बनती है। टूल खुद स्लैश वाला दो-वैल्यू फ़ॉर्म लिख देता है, और कोने फिर से गोल होने पर छोटा फ़ॉर्म लौटा देता है।

पूरा गोला या pill शेप कैसे बनाएँ?

चारों कोनों को लिंक करें, % पर जाएँ और 50% सेट करें — चौकोर बॉक्स गोल बन जाता है। pill जैसे बटन के लिए px ही रखें और किसी कोने को बटन की आधी ऊँचाई से आगे खींचें; चौड़ाई कुछ भी हो, किनारे पूरे गोल रहते हैं। “Circle” (गोला) प्रीसेट पहला वाला सेटअप एक क्लिक में दे देता है।