CSS Border Radius समजून घेणे
CSS मधील border-radius गुणधर्म (property) वेब डिझाइनमधील घटकांचे कोपरे गोलाकार करण्यासाठी वापरला जातो. हा गुणधर्म वापरून साध्या गोलाकार कोपऱ्यांपासून ते गुंतागुंतीच्या सेंद्रिय आकारांपर्यंत विविध डिझाईन्स तयार करता येतात.
Border Radius जनरेटर हे एक साधन आहे जे तुम्हाला बॉक्सच्या कोपऱ्यांची गोलाकारता नियंत्रित करण्यास मदत करते. यामध्ये तुम्ही प्रत्येक कोपरा स्वतंत्रपणे समायोजित करू शकता किंवा त्यांना एकत्र लिंक करू शकता. तसेच, डिझाइनच्या गरजेनुसार पिक्सेल (px) किंवा टक्केवारी (%) या युनिट्सचा वापर करता येतो.
पिक्सेल आणि टक्केवारी युनिट्समधील फरक
कोपरे गोलाकार करताना योग्य युनिट निवडणे महत्त्वाचे असते. या साधनामध्ये "युनिट" अंतर्गत दोन पर्याय मिळतात:
- पिक्सेल (px): पिक्सेल युनिट निवडल्यास कोपरा एका ठराविक प्रमाणात गोल होतो. बॉक्सचा आकार कितीही बदलला, तरी कोपऱ्याची गोलाकारता निश्चित राहते.
- टक्केवारी (%): टक्केवारी निवडल्यास कोपरा बॉक्सच्या आकाराच्या प्रमाणात गोल होतो. यामध्ये आडवी टक्केवारी बॉक्सच्या रुंदीनुसार (width) आणि उभी टक्केवारी बॉक्सच्या उंचीनुसार (height) काम करते.
कोपरे लिंक करणे आणि दिशांचे मॅपिंग
या साधनामध्ये कोपरे नियंत्रित करण्यासाठी स्लाइडर्स दिलेले आहेत, ज्यांची श्रेणी 0 ते 100 दरम्यान असते. हे स्लाइडर्स घड्याळाच्या दिशेने (clockwise) खालीलप्रमाणे मॅप केलेले आहेत:
- वर डावीकडे (वर डावीकडे)
- वर उजवीकडे (वर उजवीकडे)
- खाली उजवीकडे (खाली उजवीकडे)
- खाली डावीकडे (खाली डावीकडे)
जेव्हा "सर्व कोपरे लिंक करा" (सर्व कोपरे लिंक करा) हा टॉगल सुरू असतो, तेव्हा "सर्व कोपरे" (सर्व कोपरे) नावाचा एकच स्लाइडर सर्व चार कोपऱ्यांना एकत्र नियंत्रित करतो. हा टॉगल बंद केल्यास, चारही कोपऱ्यांसाठी स्वतंत्र स्लाइडर्स उपलब्ध होतात, ज्यामुळे तुम्हाला प्रत्येक कोपऱ्याला वेगळा आकार देता येतो. साधनाची सुरुवातीची स्लाइडर व्हॅल्यू 24 असते, ज्यामुळे border-radius: 24px; हा कोड तयार होतो.
लंबगोलाकार (Elliptical) मोड आणि प्रगत आकार
जेव्हा "लंबगोलाकार (Elliptical) कोपरे" (लंबगोलाकार कोपरे) हा टॉगल बंद असतो, तेव्हा प्रत्येक कोपरा एकाच त्रिज्येचा (radius) पाव-वर्तुळ (quarter-circle) असतो.
हा टॉगल सुरू केल्यावर लंबगोलाकार मोड सक्रिय होतो. या मोडमध्ये प्रत्येक कोपऱ्याला स्वतंत्र "horizontal" (आडवे) आणि "vertical" (उभे) स्लाइडर्स मिळतात. यामुळे प्रत्येक कोपऱ्याला दोन वेगवेगळ्या त्रिज्या लागू होतात, ज्यातून मऊ आणि सेंद्रिय "ब्लॉब (Blob)" (ब्लॉब) सारखे आकार तयार करता येतात.
लंबगोलाकार मोड सुरू असताना जनरेटर CSS मध्ये दोन-मूल्य असलेली स्लॅश (/) फॉर्म्युला लिहितो. जेव्हा कोपरे पुन्हा सामान्य गोलाकार केले जातात, तेव्हा जनरेटर आपोआप लहान फॉर्म्युलावर (short form) परत येतो.
वर्तुळ आणि पिल (Pill) आकारांची निर्मिती
वेब डिझाइनमध्ये वर्तुळ आणि पिल-आकाराचे बटण तयार करण्यासाठी विशिष्ट नियमांचा वापर केला जातो:
- परिपूर्ण वर्तुळ (Perfect Circle): चौरस (square) घटकाला वर्तुळात बदलण्यासाठी कोपरे लिंक करा, युनिट म्हणून टक्केवारी (%) निवडा आणि स्लाइडर ५०% वर सेट करा. यामुळे चौरसाचे परिपूर्ण वर्तुळ बनते.
- पिल आकार (Pill Shape): पिल-आकाराचे बटण तयार करण्यासाठी युनिट पिक्सेल (px) वर ठेवा आणि कोपरा बटणाच्या एकूण उंचीच्या अर्ध्यापेक्षा जास्त ड्रॅग करा. यामुळे बटणाची रुंदी कितीही वाढवली, तरी बाजू पूर्णपणे गोलाकार राहतात.
जलद डिझाइनसाठी साधनामध्ये "प्रीसेट्स" अंतर्गत काही प्रीसेट्स बटणे दिली आहेत:
- तीक्ष्ण (Sharp): कोपरे पूर्णपणे तीक्ष्ण करतो.
- गोलाकार (Rounded): कोपऱ्यांना सामान्य गोलाकार आकार देतो.
- वर्तुळ (Circle): सर्व कोपरे ५०% वर सेट करून वर्तुळ बनवतो.
- ब्लॉब (Blob): सेंद्रिय आणि मऊ ब्लॉब आकार तयार करतो.
- पान (Leaf): पानासारखा आकार तयार करतो.
डेटा प्रक्रिया आणि गोपनीयता
या साधनामध्ये सुरक्षिततेला प्राधान्य दिले जाते. कोपरा गोलाकार करण्याची आणि आकार तयार करण्याची संपूर्ण प्रक्रिया थेट तुमच्या ब्राउझरमध्ये पूर्ण केली जाते. तुम्ही सेट केलेली कोणतीही माहिती किंवा डिझाइनचा डेटा BroBroGo वर अपलोड केला जात नाही.
वारंवार विचारले जाणारे प्रश्न (FAQ)
चार कोपरे आणि px विरुद्ध % कसे काम करतात?
चार स्लाइडर्स घड्याळाच्या दिशेने वर-डावीकडे, वर-उजवीकडे, खाली-उजवीकडे आणि खाली-डावीकडच्या कोपऱ्यांशी मॅप केलेले आहेत. पिक्सेलमध्ये कोपरा एका ठराविक प्रमाणात गोल होतो; टक्क्यांमध्ये तो बॉक्सच्या प्रमाणात गोल होतो — आडवा टक्का रुंदीनुसार आणि उभा टक्का उंचीनुसार चालतो, त्यामुळे ५०% मुळे चौरसाचे वर्तुळ बनते.
लंबगोलाकार (elliptical) मोड काय करतो?
हा मोड बंद असताना, प्रत्येक कोपरा एकाच त्रिज्येचा (radius) पाव-वर्तुळ असतो. तो सुरू केल्यावर प्रत्येक कोपऱ्याला स्वतंत्र आडवी (horizontal) आणि उभी (vertical) त्रिज्या मिळते, ज्याद्वारे तुम्ही मऊ, सेंद्रिय "ब्लॉब" (blob) आकार तयार करू शकता. जनरेटर तुमच्यासाठी दोन-मूल्य असलेली स्लॅश (/) फॉर्म्युला लिहितो आणि कोपरे पुन्हा गोल झाल्यावर लहान फॉर्म्युलावर परत येतो.
मी एक परिपूर्ण वर्तुळ किंवा पिल (pill) आकार कसा बनवू?
कोपरे लिंक करा, टक्क्यांवर (%) स्विच करा आणि ५०% सेट करा: चौरसाचे वर्तुळ बनेल. पिल-आकाराच्या (pill-shaped) बटणासाठी, पिक्सेल (px) तसेच ठेवा आणि कोपरा बटणाच्या अर्ध्या उंचीपेक्षा जास्त ड्रॅग करा — कोणत्याही रुंदीमध्ये बाजू पूर्णपणे गोलाकार राहतील. 'Circle' प्रीसेट एका क्लिकमध्ये पहिली केस सेट करतो.
तयार झालेला CSS कोड कसा वापरावा?
साधनामध्ये बदल केल्यानंतर "CSS" अंतर्गत थेट CSS कोड तयार होतो. तुम्ही "CSS कॉपी करा" बटणावर क्लिक करून हा कोड कॉपी करू शकता आणि तुमच्या वेब प्रोजेक्टच्या स्टाईलशीटमध्ये थेट पेस्ट करू शकता.