အဓိကအကြောင်းအရာသို့ ကျော်သွားရန်
LibraTool logoLibraTool

အခမဲ့ CSS Border Radius ထုတ်လုပ်စက်

ထောင့်တစ်ခုချင်း လွတ်လပ်စွာ ထိန်းချုပ်ကာ rounded corner ကို မြင်ကွင်းသိ ဒီဇိုင်းဆွဲပါ။ organic blob ပုံသဏ္ဍာန်များအတွက် elliptical X/Y syntax ပံ့ပိုးသည်。

Load ပြီးသည်နှင့် offline အလုပ်လုပ်သည်
border-radius: 20px 20px 20px 20px;
ယူနစ်

အသုံးများသော အသုံးပြုမှုများ

  • သဘာဝ Blob ပုံသခွဲခြားထူးခြားသော blob ပုံများကိုဖန်တီးရန် elliptical X/Y syntax ကိုအသုံးပြုပါ။
  • ကဒ်နှင့် ကွန်တေးနာ ထောင့်များခေတ်သစ်သည် UI ဒီဇိုင်းတွင် ကဒ်များ၊ ကွန်တေးနာများ နှင့် panel များအတွက် စံပြ အဆုံးချ ထောင့်များ။
  • Avatar နှင့် Profile ကိုယ်ရုပ်သအစုံပုံများအတွက် မှန်ကန်သည့် ထောင့်ပုံ - စက်ဝိုင်း၊ squircle သို့မဟုတ် rounded စတုရန်း။
  • Pills၊ Tags နှင့် Badges9999 preset ၏ အတွက် အောင်မြင်သည့် pill ခလုတ်များ၊ tags နှင့် badges ဖန်တီးပါ။
  • Asymmetric ထောင့်ဒီဇိုင်းများထောင့်များအကျ radii ရောနှောအားဖြင့် သီးခြား၊ အီတၲလီ-အမှတ်အသားလုပ်ထားသည့် ကဒ်များ နှင့် ခလုတ်များ ဖန်တီးပါ။

မည်သို့ အလုပ်လုပ်သည်

Border-radius ဖန်တီးစက်သည် browser ထဲတွင် လုံးဝ အလုပ်လုပ်ပါသည် — server၊ library၊ upload မပါဝင်ပါ။ ၎င်းသည် CSS border-radius တန်ဖိုး string ကို React state နှင့် useMemo ကို သုံး၍ JavaScript တွင် တိုက်ရိုက် တည်ဆောက်ပြီး browser ၏ ကိုယ်ပိုင် CSS engine က ပုံစံကို အချိန်နှင့်တပြေးညီ render လုပ်နိုင်ရန် live div element တစ်ခု၏ inline style အဖြစ် အသုံးချသည်။

  1. 1
    Slider များသည် state ကို ရေးသည်
    Range input တစ်ခုစီသည် ဂဏန်း state variable ရှစ်ခုအနက် တစ်ခုသို့ ရေးသည် — elliptical mode အတွက် horizontal corner radii လေးခုနှင့် vertical လေးခု။ Unified mode သည် ရှစ်ခုစလုံးကို တန်ဖိုးအားလုံးကို တစ်ပြိုင်နက် ချိန်ညှိပေးသော setAll helper တစ်ခုမှတစ်ဆင့် slider တစ်ခုတည်းသို့ ပေါင်းစည်းသည်။
  2. 2
    useMemo သည် CSS တန်ဖိုးကို ပေါင်းစည်းသည်
    Corner value၊ unit (px သို့မဟုတ် %) သို့မဟုတ် elliptical toggle တစ်ခုခု ပြောင်းလဲတိုင်း useMemo hook သည် border-radius string ကို ပြန်တွက်ချက်ပေးသည်။ Standard mode တွင် တန်ဖိုးလေးခုစာ shorthand ကို ထုတ်ပေးပြီး elliptical ဖွင့်ထားလျှင် တန်ဖိုးရှစ်ခုစာ syntax အပြည့်အတွက် slash separator ထည့်ပေးသည် — ဥပမာ 32px 20px 20px 32px / 20px 32px 20px 32px။
  3. 3
    Browser CSS engine သည် ကြိုကြားမှုကို render လုပ်သည်
    တွက်ချက်ထားသော string ကို ရိုးရိုး div element ၏ inline borderRadius style အဖြစ် သတ်မှတ်သည်။ Browser ၏ layout engine က render လုပ်ခြင်းအားလုံးကို လုပ်ဆောင်သည် — canvas၊ SVG သို့မဟုတ် ပြင်ပ drawing code မပါဝင်ပါ။
  4. 4
    Clipboard API သည် output ကို ကူးယူသည်
    Copy ကို နှိပ်ခြင်းသည် ရွေးချယ်ထားသော format toggle အလိုက် CSS declaration (border-radius: ...;) သို့မဟုတ် ညီမျှသော Tailwind arbitrary-value class (rounded-[...]) တစ်ခုနှင့်အတူ navigator.clipboard.writeText ကို ခေါ်သည်။

ဆက်နွှယ်သော ကိရိယာများ

🎨

CSS Box Shadow ထုတ်လုပ်စက်

live preview, multi-layer stacking, color picker, inset toggle နှင့် တစ်ချက်နှိပ်ကာ copy ဖြင့် CSS box-shadow visual builder ။ Material, neumorphism နှင့် glow preset ပါဝင်သည်。

ကြိုးစားပါ
🟦

CSS Grid ဖန်တည်းကိရိယာ

CSS grid အားမြင်သာစွာ ဒီဇိုင်းဆွဲ — ကြေးများ၊ ယူနစ်များနှင့်ကွာဒျောင်းများ — နှင့် ထုတ်ဖန်တည်းသောCSS နှင့် HTML ကိုကူးယူပါ။

ကြိုးစားပါ
↔️

CSS Flexbox ဖန်တည်းကိရိယာ

flex direction၊ wrap၊ justify နှင့် align တွင်စမ်းသပ်ပါ live အရာများ — နှင့် CSS ကိုကူးယူပါ။

ကြိုးစားပါ

မကြာခဏ မေးလေ့မေးထရှိသော မေးခွန်းများ