ബോർഡർ റേഡിയസ് ജനറേറ്റർ

CSS ബോർഡർ റേഡിയസ് മനസ്സിലാക്കൽ

വെബ് ഡിസൈനിൽ ഘടകങ്ങളുടെ കോണുകൾക്ക് അനുയോജ്യമായ രീതിയിൽ വളവ് നൽകാൻ ഉപയോഗിക്കുന്ന പ്രധാനപ്പെട്ട ഒരു CSS പ്രോപ്പർട്ടിയാണ് border-radius. ഈ പ്രോപ്പർട്ടി ലളിതമായ രീതിയിൽ കൈകാര്യം ചെയ്യാനും തത്സമയം കോഡ് രൂപപ്പെടുത്താനും ബോർഡർ റേഡിയസ് ജനറേറ്റർ സഹായിക്കുന്നു. ഒരു ബോക്സിന്റെ കോണുകളുടെ വളവ് ക്രമീകരിക്കാനും, ഓരോ കോണും വെവ്വേറെയോ അല്ലെങ്കിൽ ഒരുമിച്ചോ നിയന്ത്രിക്കാനും ഈ ടൂളിലൂടെ സാധിക്കും.

വെബ് ഘടകങ്ങളുടെ കോണുകൾക്ക് വളവ് നൽകുന്നത് ഡിസൈനുകൾക്ക് കൂടുതൽ ഭംഗിയും ആധുനികതയും നൽകുന്നു. ഈ ടൂളിൽ പ്രാരംഭ സ്ലൈഡർ മൂല്യം 24 ആയി സജ്ജീകരിച്ചിരിക്കുന്നു, ഇത് border-radius: 24px; എന്ന CSS കോഡ് നൽകുന്നു. ഉപയോക്താക്കൾക്ക് ആവശ്യാനുസരണം ഈ മൂല്യങ്ങൾ മാറ്റി പുതിയ ഡിസൈനുകൾ നിർമ്മിക്കാവുന്നതാണ്.

പിക്സൽ, ശതമാനം യൂണിറ്റുകൾ തമ്മിലുള്ള വ്യത്യാസം

ബോർഡർ റേഡിയസ് നിർണ്ണയിക്കുമ്പോൾ പിക്സൽ (px), ശതമാനം (%) എന്നീ രണ്ട് യൂണിറ്റുകൾ ഉപയോഗിക്കാം. ഇവ രണ്ടും വ്യത്യസ്തമായ രീതിയിലാണ് വെബ് ഘടകങ്ങളിൽ പ്രവർത്തിക്കുന്നത്:

• പിക്സൽ (px): പിക്സൽ യൂണിറ്റ് തിരഞ്ഞെടുക്കുമ്പോൾ, കോണുകളുടെ വളവ് ഒരു നിശ്ചിത അളവിൽ തന്നെ നിലനിൽക്കുന്നു. ഘടകത്തിന്റെ വലിപ്പം മാറിയാലും കോണിന്റെ വളവിന് മാറ്റം സംഭവിക്കില്ല.
• ശതമാനം (%): ശതമാനം യൂണിറ്റ് തിരഞ്ഞെടുക്കുമ്പോൾ, കോണുകളുടെ വളവ് ആ ബോക്സിന്റെ വലിപ്പത്തിന് ആനുപാതികമായിട്ടായിരിക്കും നിശ്ചയിക്കപ്പെടുന്നത്. ഇതിൽ ഹൊറിസോണ്ടൽ ശതമാനം ബോക്സിന്റെ വീതിയെയും (width), വെർട്ടിക്കൽ ശതമാനം ബോക്സിന്റെ ഉയരത്തെയും (height) പിന്തുടരുന്നു.

ഒരു ചതുരശ്ര രൂപത്തിലുള്ള (square) ഘടകത്തിന്റെ എല്ലാ കോണുകളും 50% ആയി സജ്ജീകരിച്ചാൽ അത് കൃത്യമായ ഒരു വട്ടമായി (circle) മാറുന്നു.

എലിപ്റ്റിക്കൽ ബോർഡർ റേഡിയസ് സാങ്കേതികത

സാധാരണയായി എലിപ്റ്റിക്കൽ മോഡ് ഓഫ് ആയിരിക്കുമ്പോൾ, ഓരോ കോണും ഒരൊറ്റ റേഡിയസ് മാത്രമുള്ള കാൽ വട്ടമായിരിക്കും (quarter-circle). എന്നാൽ എലിപ്റ്റിക്കൽ മോഡ് ഓൺ ചെയ്യുമ്പോൾ ഓരോ കോണിനും വെവ്വേറെ ഹൊറിസോണ്ടൽ, വെർട്ടിക്കൽ റേഡിയസ് ലഭിക്കുന്നു.

ഈ സാങ്കേതികത ഉപയോഗിച്ച് ഡിസൈനർമാർക്ക് വളരെ മൃദുവായതും സ്വാഭാവികവുമായ ഓർഗാനിക് "ബ്ലോബ്" (blob) രൂപങ്ങൾ നിർമ്മിക്കാൻ സാധിക്കും. എലിപ്റ്റിക്കൽ മോഡ് സജീവമാകുമ്പോൾ, ജനറേറ്റർ രണ്ട് മൂല്യങ്ങളുള്ള സ്ലാഷ് ഫോം (two-value slash form) ഉപയോഗിച്ചാണ് CSS കോഡ് എഴുതുന്നത്. കോണുകൾ വീണ്ടും സാധാരണ രീതിയിൽ ഉരുണ്ടതാകുമ്പോൾ ടൂൾ സ്വയം ഷോർട്ട് ഫോമിലേക്ക് മാറുകയും ചെയ്യുന്നു.

ടൂളിലെ ഇൻപുട്ടുകളും നിയന്ത്രണങ്ങളും

ഈ ടൂളിൽ ഡിസൈൻ കൃത്യതയോടെ നിർമ്മിക്കാൻ സഹായിക്കുന്ന വിവിധ ഇൻപുട്ടുകൾ ക്രമീകരിച്ചിരിക്കുന്നു:

• സ്ലൈഡറുകൾ (Sliders): കോണുകളുടെ വളവ് ക്രമീകരിക്കാൻ 0 മുതൽ 100 വരെയുള്ള പരിധിയിലുള്ള സ്ലൈഡറുകൾ ലഭ്യമാണ്.
  • എല്ലാ കോണുകളും ബന്ധിപ്പിച്ചിരിക്കുമ്പോൾ "എല്ലാ കോണുകളും" എന്ന ഒരൊറ്റ സ്ലൈഡർ മാത്രമാണ് കാണിക്കുക.
  • കോണുകൾ ബന്ധിപ്പിക്കാത്തപ്പോൾ "മുകളിൽ ഇടത്", "മുകളിൽ വലത്", "താഴെ വലത്", "താഴെ ഇടത്" എന്നിങ്ങനെ നാല് സ്ലൈഡറുകൾ ലഭ്യമാകും.
  • എലിപ്റ്റിക്കൽ മോഡിൽ ഓരോ കോണിനും "ഹൊറിസോണ്ടൽ", "വെർട്ടിക്കൽ" സ്ലൈഡറുകൾ വെവ്വേറെ ലഭിക്കുന്നു.
• യൂണിറ്റ് സെലക്ടർ (Unit selector): "px", "%" എന്നീ യൂണിറ്റുകൾക്കിടയിൽ മാറാൻ ഇത് സഹായിക്കുന്നു.
• എല്ലാ കോണുകളും ബന്ധിപ്പിക്കുക (എല്ലാ കോണുകളും ബന്ധിപ്പിക്കുക toggle): കോണുകളുടെ മാറ്റങ്ങൾ ഒരുമിച്ച് വരുത്താനോ വെവ്വേറെയാക്കാനോ ഇത് ഉപയോഗിക്കുന്നു.
• എലിപ്റ്റിക്കൽ കോണുകൾ (എലിപ്റ്റിക്കൽ കോണുകൾ toggle): എലിപ്റ്റിക്കൽ മോഡ് ഓൺ ചെയ്യാനും ഓഫ് ചെയ്യാനും ഇത് സഹായിക്കുന്നു.

കൂടാതെ വേഗത്തിലുള്ള ഡിസൈനിംഗിനായി ചില പ്രീസെറ്റുകളും ഇതിൽ നൽകിയിട്ടുണ്ട്:

1. കൂർത്തത്: കോണുകളുടെ വളവ് പൂർണ്ണമായി ഒഴിവാക്കുന്നു.
2. ഉരുണ്ടത്: കോണുകൾക്ക് സാധാരണ രീതിയിലുള്ള വളവ് നൽകുന്നു.
3. സർക്കിൾ: എല്ലാ കോണുകളും 50% ആയി സജ്ജീകരിച്ച് വട്ടമാക്കുന്നു.
4. ബ്ലോബ്: എലിപ്റ്റിക്കൽ രീതിയിലുള്ള ഓർഗാനിക് രൂപം നൽകുന്നു.
5. ഇല: ഇലയുടെ ആകൃതിയിലുള്ള ഡിസൈൻ നൽകുന്നു.

ഔട്ട്പുട്ടും കോഡ് ഉപയോഗിക്കുന്ന രീതിയും

ഉപയോക്താക്കൾ വരുത്തുന്ന മാറ്റങ്ങൾ തത്സമയം കാണിക്കുന്ന ഒരു വിഷ്വൽ പ്രിവ്യൂ ടൂളിൽ ലഭ്യമാണ്. ഇതിന് താഴെയായി "CSS" എന്ന ഹെഡിംഗിന് കീഴിൽ ജനറേറ്റ് ചെയ്ത കോഡ് കാണാം. "CSS പകർപ്പ്" എന്ന ബട്ടൺ ഉപയോഗിച്ച് ഈ കോഡ് ഒറ്റ ക്ലിക്കിൽ കോപ്പി ചെയ്ത് നിങ്ങളുടെ വെബ് പ്രോജക്റ്റുകളിലേക്ക് നേരിട്ട് ഉപയോഗിക്കാവുന്നതാണ്.

ഈ ടൂളിന്റെ പ്രോസസ്സിംഗ് പൂർണ്ണമായും നിങ്ങളുടെ വെബ് ബ്രൗസറിൽ തന്നെയാണ് നടക്കുന്നത്. നിങ്ങൾ ഇവിടെ സജ്ജീകരിക്കുന്ന വിവരങ്ങളോ ഡിസൈനുകളോ ഒന്നും തന്നെ BroBroGo-ലേക്ക് അപ്‌ലോഡ് ചെയ്യപ്പെടുന്നില്ല.

---

പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ (FAQ)

നാല് കോണുകളും px vs % ഉം എങ്ങനെയാണ് പ്രവർത്തിക്കുന്നത്?

നാല് സ്ലൈഡറുകൾ ക്ലോക്ക് വൈസ് ദിശയിൽ മുകളിൽ-ഇടത്, മുകളിൽ-വലത്, താഴെ-വലത്, താഴെ-ഇടത് കോണുകളിലേക്ക് മാപ്പ് ചെയ്യുന്നു. പിക്സലിൽ ഒരു കോൺ ഒരു നിശ്ചിത അളവിൽ ഉരുണ്ടതാകുന്നു; ശതമാനത്തിൽ അത് ബോക്സിന് ആനുപാതികമായി ഉരുണ്ടതാകുന്നു — ഹൊറിസോണ്ടൽ ശതമാനം വീതിയെയും വെർട്ടിക്കൽ ശതമാനം ഉയരത്തെയും പിന്തുടരുന്നു, അതിനാൽ 50% ഒരു ചതുരത്തെ വട്ടമാക്കുന്നു.

എലിപ്റ്റിക്കൽ മോഡ് എന്താണ് ചെയ്യുന്നത്?

ഇത് ഓഫ് ചെയ്യുമ്പോൾ, ഓരോ കോണും ഒരൊറ്റ റേഡിയസ് ഉള്ള കാൽ വട്ടമായിരിക്കും. ഇത് ഓൺ ചെയ്താൽ ഓരോ കോണിനും വെവ്വേറെ ഹൊറിസോണ്ടൽ, വെർട്ടിക്കൽ റേഡിയസ് ലഭിക്കും, ഇത് ഉപയോഗിച്ചാണ് മൃദുവായ ഓർഗാനിക് "ബ്ലോബ്" (blob) രൂപങ്ങൾ നിർമ്മിക്കുന്നത്. ജനറേറ്റർ നിങ്ങൾക്കായി രണ്ട് മൂല്യങ്ങളുള്ള സ്ലാഷ് ഫോം എഴുതുകയും കോണുകൾ വീണ്ടും ഉരുണ്ടതാകുമ്പോൾ ഷോർട്ട് ഫോമിലേക്ക് മാറുകയും ചെയ്യുന്നു.

എനിക്ക് എങ്ങനെ ഒരു കൃത്യമായ വട്ടമോ പിൽ ആകൃതിയോ ഉണ്ടാക്കാം?

കോണുകൾ പരസ്പരം ബന്ധിപ്പിക്കുക, ശതമാനത്തിലേക്ക് (percent) മാറ്റി 50% എന്ന് നൽകുക: ഒരു ചതുരം വട്ടമായി മാറും. ഒരു പിൽ ആകൃതിയിലുള്ള (pill-shaped) ബട്ടണിനായി, പിക്സലുകൾ (pixels) തന്നെ നിലനിർത്തിക്കൊണ്ട് ഒരു കോൺ ബട്ടണിന്റെ പകുതി ഉയരത്തേക്കാൾ കൂടുതൽ വലിക്കുക — വീതി എത്രയായാലും വശങ്ങൾ പൂർണ്ണമായും ഉരുണ്ടിരിക്കും. സർക്കിൾ പ്രീസെറ്റ് ഒറ്റ ക്ലിക്കിലൂടെ ആദ്യത്തെ കേസ് സജ്ജമാക്കുന്നു.