बॉर्डर रेडियस

एक विज़ुअल बॉर्डर रेडियस जनरेटर

अपने वेब कंपोनेंट्स के लिए परफेक्ट गोल किनारे (rounded edges) बनाने के लिए अब आपको नंबरों का अनुमान लगाने और बार-बार ब्राउज़र को रिफ्रेश करने की ज़रूरत नहीं है। यह विज़ुअल बॉर्डर रेडियस जनरेटर आपको स्लाइडर्स एडजस्ट करने और तुरंत यह देखने की सुविधा देता है कि कर्व्स किसी एलिमेंट को कैसे प्रभावित करते हैं। एक बार जब आप अपना मनचाहा लुक पा लेते हैं, तो आप ऑप्टिमाइज़ किए गए CSS स्निपेट को सीधे अपने क्लिपबोर्ड पर कॉपी कर सकते हैं।

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

CSS राउंडेड कॉर्नर्स में महारत हासिल करें

border-radius प्रॉपर्टी मॉडर्न वेब डिज़ाइन का एक बुनियादी हिस्सा है, जिसका उपयोग बटन, इमेज, मोडल और लेआउट कंटेनरों के तीखे किनारों को सॉफ्ट करने के लिए किया जाता है। हालाँकि यह देखने में आसान लगता है, लेकिन जब आप विशिष्ट कॉर्नर्स को टारगेट करना चाहते हैं तो इसका सिंटैक्स काफी पेचीदा हो सकता है।

यह border-radius css जनरेटर आपको CSS शॉर्टहैंड सिंटैक्स को प्रभावी ढंग से समझने और उपयोग करने में मदद करता है। जब आप सभी कॉर्नर्स को एक साथ लिंक करते हैं, तो टूल एक सिंगल वैल्यू आउटपुट करता है (उदाहरण के लिए, border-radius: 16px;)। यदि आप कोई कस्टम शेप बनाने के लिए कॉर्नर्स को अनलिंक करते हैं, तो जनरेटर आपके इनपुट के आधार पर CSS को ऑटोमैटिक रूप से फ़ॉर्मेट कर देता है:

• चार वैल्यू: यदि सभी कॉर्नर अलग-अलग हैं, तो CSS उन्हें टॉप-लेफ्ट से शुरू करके क्लॉकवाइज़ क्रम में लागू करता है (उदा., border-radius: 16px 8px 4px 2px;)।
• दो वैल्यू: यदि टॉप-लेफ्ट, बॉटम-राइट से मेल खाता है, और टॉप-राइट, बॉटम-लेफ्ट से मेल खाता है, तो टूल स्मार्ट तरीके से कोड को दो वैल्यू में छोटा कर देता है (उदा., border-radius: 16px 0;)।

पिक्सेल बनाम प्रतिशत

CSS में rounded corners लिखते समय सही यूनिट चुनना सबसे आम दुविधाओं में से एक है। यह टूल आपको आसानी से पिक्सेल (px) और प्रतिशत (%) के बीच टॉगल करने की सुविधा देता है, जिनमें से प्रत्येक का UI डिज़ाइन में एक अलग उद्देश्य होता है।

पिक्सेल (px) एब्सोल्यूट (absolute) यूनिट होते हैं। एक 12px border radius हमेशा बिल्कुल एक जैसा दिखेगा, चाहे इसे किसी छोटे बटन पर लगाया जाए या किसी बड़ी हीरो इमेज पर। कार्ड, ड्रॉपडाउन मेनू और इनपुट फ़ील्ड जैसे UI कंपोनेंट्स के लिए पिक्सेल एक स्टैण्डर्ड विकल्प हैं क्योंकि वे आपके पूरे एप्लिकेशन में एक सुसंगत और एक समान डिज़ाइन लैंग्वेज बनाए रखते हैं। यह टूल 200px तक की पिक्सेल वैल्यू की अनुमति देता है।

प्रतिशत (%) एलिमेंट के अपने आकार के सापेक्ष (relative) होते हैं। एक वर्गाकार (square) एलिमेंट पर 50% border radius हमेशा एक परफेक्ट सर्कल बनाएगा, चाहे वह वर्ग 50 पिक्सेल चौड़ा हो या 500 पिक्सेल चौड़ा। यदि एलिमेंट एक आयत (rectangle) है, तो 50% एक अंडाकार (oval) आकार बनाएगा। प्रतिशत, प्रोफ़ाइल अवतार या डेकोरेटिव बैकग्राउंड ब्लब्स जैसे रिस्पॉन्सिव एलिमेंट्स के लिए आदर्श हैं। यह टूल प्रतिशत वैल्यू को 50% तक सीमित रखता है, क्योंकि CSS में इससे अधिक वैल्यू देने पर विज़ुअल राउंडिंग इफ़ेक्ट नहीं बढ़ता है।

साधारण कोनों से आगे: एक CSS shape generator

हालांकि इसका उपयोग मुख्य रूप से किनारों को हल्का गोल करने के लिए किया जाता है, border-radius एक पावरफुल css shape generator भी है। कोनों को अनलिंक करके और अलग-अलग वैल्यूज़ को मिलाकर, आप SVG फ़ाइलों या जटिल clip-paths के बिना यूनीक ज्योमेट्रिक शेप बना सकते हैं। इसे दर्शाने के लिए इस टूल में कई प्रीसेट शामिल हैं:

• Pill: सभी कोनों पर एक बहुत बड़ी पिक्सेल वैल्यू (जैसे 9999px) लगाकर, आप एक "pill" या स्टेडियम शेप बना सकते हैं। इसका उपयोग बैज, टैग और मॉडर्न कॉल-टू-एक्शन बटन के लिए काफी ज्यादा किया जाता है। ब्राउज़र असल गोलाई को एलिमेंट की ऊंचाई के ठीक आधे हिस्से तक सीमित कर देता है, जिससे किनारों पर एकदम सही अर्धवृत्त (semi-circles) बनते हैं।
• Circle: सभी कोनों को 50% पर सेट करने से एक चौकोर (square) एकदम गोल (perfect circle) बन जाता है।
• Leaf: टॉप-लेफ्ट और बॉटम-राइट कोनों को 0 पर, और टॉप-राइट और बॉटम-लेफ्ट कोनों को एक बड़ी वैल्यू (जैसे 48px) पर सेट करके, आप एक असिमेट्रिकल, प्राकृतिक पत्ती (leaf) का शेप बना सकते हैं।
• Tab: बॉटम के कोनों को 0 पर छोड़ते हुए केवल टॉप-लेफ्ट और टॉप-राइट कोनों (जैसे, 16px) को गोल करके, आप एक क्लासिक फ़ोल्डर टैब शेप बना सकते हैं, जो नेविगेशन मेनू के लिए एकदम सही है।

अपने UI कंपोनेंट्स को परफेक्ट बनाएं

गोल किनारे (Rounded corners) शायद ही कभी अकेले इस्तेमाल होते हैं; वे आमतौर पर एक बड़े और सुसंगत डिज़ाइन सिस्टम का हिस्सा होते हैं। उदाहरण के लिए, एक बेहतरीन कार्ड कंपोनेंट पेज पर अलग दिखने के लिए हल्की बॉर्डर रेडियस को डेप्थ और कलर के साथ जोड़ता है।

एक बार जब आप अपनी मनचाही बॉर्डर रेडियस जनरेट कर लेते हैं, तो आप अपने डिज़ाइन को पूरा करने के लिए इसे अन्य CSS इफेक्ट्स के साथ मिला सकते हैं। एक उभरा हुआ और फ्लोटिंग इफेक्ट बनाने के लिए, हमारे Box Shadow Generator का उपयोग करके अपने नए शेप के साथ एक सॉफ्ट ड्रॉप शैडो जोड़ने का प्रयास करें। यदि आप किसी बटन या डेकोरेटिव बैकग्राउंड एलिमेंट को स्टाइल कर रहे हैं, तो आप CSS Gradient Generator का उपयोग करके एक आकर्षक बैकग्राउंड लगा सकते हैं, या Color Palette Generator के साथ बेहतरीन कॉम्प्लिमेंट्री सॉलिड कलर्स खोज सकते हैं।