Border Radius જનરેટર

CSS border-radius પ્રોપર્ટીની સમજણ

વેબ ડિઝાઇનમાં બોક્સના ખૂણાઓને ગોળાકાર કરવા માટે CSS border-radius પ્રોપર્ટીનો ઉપયોગ થાય છે. આ પ્રોપર્ટીની મદદથી તમે કોઈપણ એલિમેન્ટના ચાર ખૂણાઓની ગોળાઈને નિયંત્રિત કરી શકો છો. આ ટૂલ તમને દરેક ખૂણાને વ્યક્તિગત રીતે અથવા બધા ખૂણાઓને એકસાથે લિંક કરીને ગોળાકાર કરવાની સુવિધા આપે છે.

જ્યારે તમે આ ટૂલનો ઉપયોગ કરો છો, ત્યારે પ્રારંભિક સ્લાઇડર વેલ્યુ 24 હોય છે, જેનાથી border-radius: 24px; જનરેટ થાય છે. આ ટૂલના ચાર મુખ્ય સ્લાઇડર્સ ઘડિયાળની દિશામાં (clockwise) કામ કરે છે, જે નીચે મુજબના ખૂણાઓ સાથે જોડાયેલા છે:

1. ઉપર ડાબે (Top-left)
2. ઉપર જમણે (Top-right)
3. નીચે જમણે (Bottom-right)
4. નીચે ડાબે (Bottom-left)

પિક્સેલ (px) અને ટકાવારી (%) વચ્ચેનો તફાવત

ખૂણાઓની ગોળાઈ નક્કી કરવા માટે બે મુખ્ય એકમો ઉપલબ્ધ છે, જેને તમે "એકમ (Unit)" સિલેક્ટર દ્વારા પસંદ કરી શકો છો:

• પિક્સેલ (px): પિક્સેલ એકમમાં ખૂણો એક નિશ્ચિત માત્રામાં ગોળાકાર થાય છે. આ માપ એલિમેન્ટના પોતાના કદ પર આધાર રાખતું નથી.
• ટકાવારી (%): ટકાવારીમાં ખૂણાની ગોળાઈ બોક્સના કદના પ્રમાણમાં નક્કી થાય છે. આમાં આડી ટકાવારી બોક્સની પહોળાઈને અનુસરે છે અને ઊભી ટકાવારી બોક્સની ઊંચાઈને અનુસરે છે. આ સુવિધા રિસ્પોન્સિવ ડિઝાઇનમાં ખૂબ ઉપયોગી બને છે.

લંબગોળ (Elliptical) મોડ દ્વારા એડવાન્સ આકારો

જ્યારે લંબગોળ મોડ બંધ હોય છે, ત્યારે દરેક ખૂણો સમાન ત્રિજ્યા ધરાવતો પા-વર્તુળ (quarter-circle) બને છે, જેમાં એક જ વેલ્યુનો ઉપયોગ થાય છે.

પરંતુ જ્યારે તમે "લંબગોળ (Elliptical) ખૂણા" ટોગલ ચાલુ કરો છો, ત્યારે દરેક ખૂણાને અલગ આડી (horizontal) અને ઊભી (vertical) ત્રિજ્યા મળે છે. આ મોડમાં દરેક ખૂણા માટે બે સ્લાઇડર્સ ઉપલબ્ધ બને છે: "આડું (Horizontal)" અને "ઊભું (Vertical)". આનાથી તમે સોફ્ટ અને ઓર્ગેનિક "બ્લોબ" (blob) આકારો બનાવી શકો છો.

કોડિંગની દ્રષ્ટિએ, જ્યારે લંબગોળ મોડ ચાલુ હોય ત્યારે જનરેટર CSS માં બે-વેલ્યુવાળું સ્લેશ (/) ફોર્મેટ લખે છે. જ્યારે ખૂણા ફરીથી સામાન્ય ગોળ થાય, ત્યારે તે આપોઆપ ટૂંકા ફોર્મ પર પાછું આવી જાય છે.

વર્તુળ અને પિલ આકારો બનાવવાની ટેકનિક

ચોક્કસ ભૌમિતિક આકારો મેળવવા માટે નીચેની પદ્ધતિઓનો ઉપયોગ કરી શકાય છે:

• પરફેક્ટ વર્તુળ (Circle): એક ચોરસ એલિમેન્ટને સંપૂર્ણ વર્તુળમાં બદલવા માટે, બધા ખૂણાઓને લિંક કરો, એકમ તરીકે ટકાવારી (%) પસંદ કરો અને સ્લાઇડરને 50% પર સેટ કરો.
• પિલ-આકાર (Pill Shape): પિલ-આકારના બટન માટે, એકમ તરીકે પિક્સેલ (px) રાખો અને ખૂણાના સ્લાઇડરને બટનની અડધી ઊંચાઈ કરતાં વધુ મૂલ્ય પર ખેંચો. આનાથી બટનની પહોળાઈ ગમે તેટલી બદલાય, તો પણ તેની બાજુઓ સંપૂર્ણપણે ગોળાકાર જ રહેશે.

પ્રીસેટ્સનો ઉપયોગ અને CSS એપ્લાય કરવાની રીત

ડિઝાઇન પ્રક્રિયાને ઝડપી બનાવવા માટે ટૂલમાં "પ્રીસેટ્સ" સેક્શન આપવામાં આવ્યું છે, જેમાં નીચેના બટનો ઉપલબ્ધ છે:

• તીક્ષ્ણ (Sharp): બધા ખૂણાઓની ગોળાઈ શૂન્ય કરે છે.
• ગોળાકાર (Rounded): ખૂણાઓને સામાન્ય ગોળાઈ આપે છે.
• વર્તુળ (Circle): બધા ખૂણાઓને આપોઆપ 50% પર સેટ કરે છે.
• બ્લોબ (Blob): ઓર્ગેનિક આકાર બનાવે છે.
• પાંદડું (Leaf): સામસામેના ખૂણાઓને અલગ રીતે ગોળાકાર કરીને પાંદડા જેવો આકાર આપે છે.

તમે સ્લાઇડર્સ અથવા પ્રીસેટ્સ દ્વારા જે પણ આકાર બનાવશો, તેનો લાઈવ પ્રિવ્યૂ સ્ક્રીન પર દેખાશે. તેની નીચે "CSS" હેડિંગ હેઠળ કોડ જનરેટ થાય છે. તમે "CSS કૉપિ કરો" બટન પર ક્લિક કરીને આ કોડને કૉપિ કરી શકો છો અને તમારા વેબ એલિમેન્ટના સ્ટાઇલશીટમાં પેસ્ટ કરી શકો છો.

ડેટા પ્રોસેસિંગ અને પ્રાઇવસી

આ ટૂલ સંપૂર્ણપણે ક્લાયન્ટ-સાઇડ પર કામ કરે છે. દરેક ખૂણો સીધો તમારા બ્રાઉઝરમાં જ ડ્રો થાય છે. તમે અહીં જે પણ સેટિંગ્સ અથવા વેલ્યુ સેટ કરો છો, તેમાંથી કોઈપણ માહિતી BroBroGo પર અપલોડ થતી નથી.

---

વારંવાર પૂછાતા પ્રશ્નો (FAQ)

ચાર ખૂણાઓ અને px વિરુદ્ધ % કેવી રીતે કામ કરે છે?

ચાર સ્લાઇડર્સ ઘડિયાળની દિશામાં કામ કરે છે: ઉપર-ડાબે, ઉપર-જમણે, નીચે-જમણે અને નીચે-ડાબે. પિક્સેલ (px) માં ખૂણો એક નિશ્ચિત માત્રામાં ગોળાકાર થાય છે; ટકાવારી (%) માં તે બોક્સના કદના પ્રમાણમાં ગોળાકાર થાય છે — આડી ટકાવારી પહોળાઈને અનુસરે છે અને ઊભી ટકાવારી ઊંચાઈને અનુસરે છે, તેથી 50% સેટ કરવાથી ચોરસ વર્તુળમાં ફેરવાઈ જાય છે.

લંબગોળ (elliptical) મોડ શું કામ કરે છે?

જ્યારે આ મોડ બંધ હોય, ત્યારે દરેક ખૂણો સમાન ત્રિજ્યા (radius) ધરાવતો પા-વર્તુળ (quarter-circle) બને છે. તેને ચાલુ કરવાથી દરેક ખૂણાને અલગ આડી (horizontal) અને ઊભી (vertical) ત્રિજ્યા મળે છે, જેનાથી તમે સોફ્ટ, ઓર્ગેનિક "બ્લોબ" (blob) આકારો બનાવી શકો છો. આ જનરેટર તમારા માટે બે-વેલ્યુવાળું સ્લેશ (/) ફોર્મેટ લખે છે અને જ્યારે ખૂણા ફરીથી સામાન્ય ગોળ થાય ત્યારે આપોઆપ ટૂંકા ફોર્મ પર પાછું આવી જાય છે.

હું એક પરફેક્ટ વર્તુળ (circle) અથવા પિલ (pill) આકાર કેવી રીતે બનાવી શકું?

ખૂણાઓને લિંક કરો, ટકાવારી (%) પર સ્વિચ કરો અને 50% સેટ કરો: ચોરસ આપોઆપ વર્તુળ બની જશે. પિલ-આકારના (ગોળાકાર કેપ્સ્યુલ) બટન માટે, પિક્સેલ (px) જ રાખો અને ખૂણાને બટનની અડધી ઊંચાઈ કરતાં વધુ ખેંચો — આનાથી બટનની પહોળાઈ ગમે તેટલી હોય, તેની બાજુઓ સંપૂર્ણપણે ગોળાકાર રહેશે. 'Circle' પ્રીસેટ માત્ર એક ક્લિકમાં આ સેટિંગ કરી આપે છે.