LibraTool logoLibraTool

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

ഓരോ കോണിലും സ്വതന്ത്ര നിയന്ത്രണത്തോടെ വൃത്താകൃതിയിലുള്ള കോണുകൾ വിഷ്വലായി ഡിസൈൻ ചെയ്യുക. ഓർഗാനിക് ബ്ലോബ് ആകൃതികൾക്കായി എലിപ്റ്റിക്കൽ X/Y സിന്റാക്സ് പിന്തുണയ്ക്കുന്നു.

ലോഡ് ചെയ്തുകഴിഞ്ഞാൽ ഓഫ്‌ലൈനിൽ പ്രവർത്തിക്കുന്നു
border-radius: 20px 20px 20px 20px;
യൂണിറ്റ്

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ബോർഡർ-റേഡിയസ് ജനറേറ്റർ പൂർണ്ണമായും ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു — സെർവറില്ല, ലൈബ്രറിയില്ല, അപ്‌ലോഡില്ല. ഇത് React സ്റ്റേറ്റും useMemo-ഉം ഉപയോഗിച്ച് നേരിട്ട് JavaScript-ൽ CSS border-radius മൂല്യ സ്ട്രിംഗ് നിർമ്മിക്കുന്നു, പിന്നെ ഒരു ലൈവ് div എലമെന്റിൽ ഒരു ഇൻലൈൻ സ്റ്റൈലായി പ്രയോഗിക്കുന്നു, അതിനാൽ ബ്രൗസറിന്റെ സ്വന്തം CSS എഞ്ചിൻ ആകൃതി തത്സമയം റെൻഡർ ചെയ്യുന്നു.

  1. 1
    സ്ലൈഡറുകൾ സ്റ്റേറ്റ് എഴുതുന്നു
    ഓരോ റേഞ്ച് ഇൻപുട്ടും എട്ട് സംഖ്യാ സ്റ്റേറ്റ് വേരിയബിളുകളിൽ ഒന്നിലേക്ക് എഴുതുന്നു — എലിപ്റ്റിക്കൽ മോഡിന് നാല് തിരശ്ചീന കോർണർ റേഡിയസുകളും നാല് ലംബവും. Unified മോഡ് ഒരൊറ്റ setAll ഹെൽപ്പർ വഴി എല്ലാ എട്ടിനെയും ഒരൊറ്റ സ്ലൈഡറിലേക്ക് ചുരുക്കുന്നു, ഇത് ഒരേസമയം ഓരോ മൂല്യവും സമന്വയിപ്പിക്കുന്നു.
  2. 2
    useMemo CSS മൂല്യം കൂട്ടിച്ചേർക്കുന്നു
    ഏതെങ്കിലും കോർണർ മൂല്യമോ, യൂണിറ്റോ (px അല്ലെങ്കിൽ %), അല്ലെങ്കിൽ എലിപ്റ്റിക്കൽ ടോഗിളോ മാറുമ്പോൾ ഒരു useMemo hook border-radius സ്ട്രിംഗ് വീണ്ടും കണക്കാക്കുന്നു. സ്റ്റാൻഡേർഡ് മോഡിൽ ഇത് നാല്-മൂല്യ ചുരുക്ക രൂപം നിർമ്മിക്കുന്നു; എലിപ്റ്റിക്കൽ ഓണായിരിക്കുമ്പോൾ, പൂർണ്ണ എട്ട്-മൂല്യ സിന്റാക്സിന് ഇത് സ്ലാഷ് വേർതിരിവ് ചേർക്കുന്നു — ഉദാ. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    ബ്രൗസർ CSS എഞ്ചിൻ പ്രിവ്യൂ റെൻഡർ ചെയ്യുന്നു
    കണക്കാക്കിയ സ്ട്രിംഗ് ഒരു പ്ലെയിൻ div എലമെന്റിൽ ഒരു ഇൻലൈൻ borderRadius സ്റ്റൈലായി സെറ്റ് ചെയ്യുന്നു. ബ്രൗസറിന്റെ ലേഔട്ട് എഞ്ചിൻ എല്ലാ റെൻഡറിംഗും ചെയ്യുന്നു — കാൻവാസോ SVG-യോ മൂന്നാം കക്ഷി ഡ്രോയിംഗ് കോഡോ ഇല്ല.
  4. 4
    Clipboard API ഔട്ട്പുട്ട് പകർത്തുന്നു
    Copy ക്ലിക്ക് ചെയ്യുന്നത് തിരഞ്ഞെടുത്ത ഫോർമാറ്റ് ടോഗിളിനെ ആശ്രയിച്ച് CSS പ്രഖ്യാപനം (border-radius: ...;) അല്ലെങ്കിൽ തുല്യമായ Tailwind ഇഷ്ടാനുസൃത-മൂല്യ ക്ലാസ് (rounded-[...]) ഉപയോഗിച്ച് navigator.clipboard.writeText വിളിക്കുന്നു.

അനുബന്ധ ടൂളുകൾ

🎨

CSS ബോക്സ് ഷാഡോ ജനറേറ്റർ

ലൈവ് പ്രിവ്യൂ, മൾട്ടി-ലെയർ സ്റ്റാക്കിംഗ്, കളർ പിക്കർ, ഇൻസെറ്റ് ടോഗിൾ, ഒറ്റ-ക്ലിക്ക് കോപ്പി എന്നിവയോടെ CSS box-shadow-ന് വിഷ്വൽ ബിൽഡർ. Material, ന്യൂമോർഫിസം, ഗ്ലോ പ്രീസെറ്റുകൾ ഉൾപ്പെടുന്നു.

പരീക്ഷിച്ചു നോക്കൂ
🟦

CSS ഗ്രിഡ് ജനറേറ്റർ

CSS ഗ്രിഡ് ദൃശ്യപരമായി ഡിസൈൻ ചെയ്യുക — ട്രാക്കുകൾ, യൂണിറ്റുകൾ, ഗ്യാപ്പുകൾ — തുടർന്ന് ജനറേറ്റ് ചെയ്ത CSS-ഉം HTML-ഉം കോപ്പി ചെയ്യുക.

പരീക്ഷിച്ചു നോക്കൂ
↔️

CSS ഫ്ലെക്സ്ബോക്സ് ജനറേറ്റർ

ലൈവ് ഐറ്റങ്ങളിൽ flex direction, wrap, justify, align എന്നിവ പരീക്ഷിക്കുക — CSS കോപ്പി ചെയ്യുക.

പരീക്ഷിച്ചു നോക്കൂ

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