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

အခမဲ့ CSS Box Shadow ထုတ်လုပ်စက်

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

Load ပြီးသည်နှင့် offline အလုပ်လုပ်သည်
Preview ကျောင်းအုပ်

အတုလုံးကိုအနေအထားမှန်ကန်အောင်ချဲ့လျှောက်ရန်သည့်အဖွဲ့အတန်း၏တိုးချဲ့မှုကိုသည့်နည်းလမ်းဖြင့် Shift ကိုမြှုပ်နှံပါ

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

ကြိုတင်ချိန်ညှိချက်

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

  • Card UI အီလျှုံကများdashboards၊ အီလျှုံကစည်တန်း နှင့် dashboards အတွက်အီလျှုံကအီလျှုံကများဖန်တီးခြင်း။
  • Button Press အီလျှုံကများလက်တွေ့ကမ္ဘာ၏ အတိမ်အနက်နှင့် နှိပ်ထားသောအခြေအနေများကို ဆင်တူသော ခလုတ်အရိပ်များ ဖန်တီးပါ။
  • Neumorphism Soft UIpaired အီလျှုံက + အီလျှုံကအီလျှုံကများပါသည့်soft-UI neumorphism အီလျှုံကကိုဖန်တီးခြင်း။
  • Modal & Popover အီလျှုံကများဆက်စပ်အီလျှုံကများ နှင့် dropdowns အတွက်မြင့်တက်သော အီလျှုံကအီလျှုံကဖန်တီးခြင်း။
  • ပြန်လည်နှင့်အာရုံစိုက်မှု ကျင်းပပြုလုပ်ခြင်းအရှိန်မြန်မြန် အဆင့်တည်ဆောက်မှု, အာရုံစိုက်မှု လှံ့ဆင်း, နှင့်နီဆုံ-ဒီဇိုင်း အလင်းလများ။

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

Box-shadow ဖန်တီးစက်သည် server၊ library မပါသော client-side React ကိရိယာတစ်ခု လုံးဝဖြစ်သည်။ ၎င်းသည် state တွင် shadow layer object များ စာရင်းတစ်ခု ထားရှိပြီး ကိုယ်တိုင်ရေးထားသော rgba() ဖော်မတ်ချသူကို သုံး၍ ပြောင်းလဲမှုတိုင်းတွင် မှန်ကန်သော CSS box-shadow string များကို ပေါင်းစည်းကာ React ၏ style prop မှတစ်ဆင့် ကြိုကြားမှု element တစ်ခုပေါ်တွင် တိုက်ရိုက် အသုံးချသဖြင့် browser ၏ ကိုယ်ပိုင် render engine က ရလဒ်ကို ချက်ချင်း ဆွဲပေးသည်။

  1. 1
    Layer parameter များသည် ဖော်မတ်ချသူကို ကျွေးမွေးသည်
    Shadow layer တစ်ခုစီသည် x/y offset၊ blur၊ spread၊ hex color နှင့် opacity တန်ဖိုးကို သိမ်းထားသည်။ ပြောင်းလဲမှုတိုင်းတွင် သေးငယ်သော shadowToCss function တစ်ခုသည် hex color ကို regex တစ်ခုဖြင့် RGB component များသို့ ပြောင်းလဲပြီး rgba() string ကို ပေါင်းစည်းသည် — ဥပမာ 0px 4px 12px 0px rgba(0, 0, 0, 0.15)။ Layer များစွာကို comma ဖြင့် ပေါင်းစပ်သည်။
  2. 2
    Browser သည် ကြိုကြားမှုကို တိုက်ရိုက် render လုပ်သည်
    ပေါင်းစည်းထားသော string ကို JSX တွင် div element ၏ boxShadow style property သို့ တိုက်ရိုက် သတ်မှတ်သည်။ React သည် DOM attribute ကို update လုပ်ပြီး browser ၏ CSS engine က shadow ကို ချက်ချင်း ဆွဲသည် — canvas သို့မဟုတ် WebGL မပါဝင်ပါ၊ native CSS rendering သာဖြစ်သည်။
  3. 3
    Drag-to-position သည် Pointer Events API ကို သုံးသည်
    ကြိုကြားမှု box ကို click ပြီး drag လုပ်ခြင်းသည် element ပေါ်တွင် setPointerCapture ကို ခေါ်ပြီး onPointerMove delta များကို track လုပ်ကာ active layer ၏ x နှင့် y offset ကို အချိန်နှင့်တပြေးညီ update လုပ်သည်။ Shift ကို ဖိထားခြင်းသည် အသေးစိတ် တည်နေရာချထားမှုအတွက် 0.25x scale factor ကို အသုံးချသည်။
  4. 4
    Output ကို clipboard သို့ ကူးထားသည်
    ကိရိယာသည် layer data တူတူမှ output format နှစ်မျိုး ထုတ်ပေးသည်: standard CSS box-shadow declaration နှင့် Tailwind ၏ syntax စည်းမျဉ်းအလိုက် space များကို underscore ဖြင့် အစားထိုးထားသော Tailwind arbitrary-value class (shadow-[...])။ တစ်ချက်နှိပ် copy သည် navigator.clipboard.writeText ကို သုံးသည်။

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

◖

CSS Border Radius ထုတ်လုပ်စက်

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

ကြိုးစားပါ
🟦

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

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

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

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

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

ကြိုးစားပါ

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