Box Shadow ဖန်တီးကိရိယာ

box-shadow တစ်ခုကို ပုံဖော်ရန် ဆလိုက်ဒါများကို ဆွဲယူပါ၊ ပိုမိုနက်ရှိုင်းစေရန် အလွှာများကို ထပ်ဆင့်ပြီး ပြီးပြည့်စုံသော CSS ကို ချက်ချင်း ကူးယူပါ။

အရိပ်အလွှာများ
အလွှာ 1
CSS
သင့်အရိပ်ကို ပုံဖော်ရန် ဆလိုက်ဒါများကို ညှိယူပါ။

အရိပ်တစ်ခုစီကို သင့်ဘရောက်ဆာထဲတွင် တိုက်ရိုက်ဖော်ပြပေးခြင်းဖြစ်သည်။ သင်သတ်မှတ်သမျှကို BroBroGo သို့ တင်ပို့မည်မဟုတ်ပါ။

အမေးအဖြေ

Offset၊ blur နှင့် spread တို့က အမှန်တကယ် ဘာကို ထိန်းချုပ်ပေးသနည်း။

Offset သည် အရိပ်ကို ဘယ်/ညာ နှင့် အပေါ်/အောက် ရွှေ့ပေးသည်၊ blur သည် ၎င်း၏အနားသတ်များကို ဝေဝါးပျော့ပျောင်းစေပြီး၊ spread သည် ဝေဝါးခြင်းမပြုမီ အရိပ်ကို ကျယ်စေ သို့မဟုတ် ကျဉ်းစေသည်။ အနှုတ်တန်ဖိုးရှိသော spread သည် အရိပ်ကို အတွင်းသို့ ကျုံ့စေပြီး ကျဉ်းမြောင်းကပ်လျက်ရှိသော အရိပ်တစ်ခုအတွက် အသုံးဝင်သည်။

Inset ရွေးချယ်မှုက ဘာလုပ်ပေးသလဲ။

သာမန်အရိပ်သည် ကတ်တစ်ခု၏ နောက်ကွယ်ရှိ အလင်းကဲ့သို့ အစိတ်အပိုင်း၏ အပြင်ဘက်သို့ ကျရောက်သည်။ Inset သည် ၎င်းကို အတွင်းဘက်သို့ ပြောင်းပြန်လှန်ပေးသောကြောင့် အစိတ်အပိုင်းသည် အတွင်းသို့ ချိုင့်ဝင်နေသကဲ့သို့ မြင်ရသည် — ၎င်းသည် ချိုင့်ဝင်နေသော input များ သို့မဟုတ် ဖိထားသော ခလုတ်များအတွက် အသုံးဝင်သည်။

အရိပ်အလွှာ တစ်ခုထက်မကကို ဘာကြောင့် ထပ်ဆင့်အသုံးပြုသင့်သလဲ။

အရိပ်တစ်ခုတည်းသာ သုံးပါက အရွယ်အစားတစ်ခုထက်ကျော်လွန်လျှင် ပြားချပ်ချပ်ကြီး ဖြစ်နေတတ်သည်။ အမှန်တကယ် ကြွတက်နေသော ပုံစံရရှိရန် ကျဉ်းမြောင်းပြီး ရင့်သောအရိပ်တစ်ခုနှင့် ပျော့ပျောင်းပြီး ကျယ်ပြန့်သော အရိပ်တစ်ခုကို ပေါင်းစပ်လေ့ရှိသည် — ထိုအကျိုးသက်ရောက်မှုကို ရရှိရန် ဒုတိယအလွှာတစ်ခု ထပ်ထည့်ပြီး တစ်ခုစီကို သီးခြားစီ ညှိယူပါ။

CSS Cubic Bezier ဖန်တီးကိရိယာeasing curve တစ်ခုကို ပုံဖော်ရန် လက်တံနှစ်ခုကို ဆွဲယူပါ၊ ပုံမှန်အရှိန်နှင့် နှိုင်းယှဉ်ကြည့်ရှုပြီး cubic-bezier() တန်ဖိုးကို ကူးယူပါ။Gradient ဖန်တီးကိရိယာlinear၊ radial သို့မဟုတ် conic gradient တစ်ခုကို တည်ဆောက်ပါ၊ color stop များ ထည့်သွင်းပြီး လမ်းကြောင်းကို သတ်မှတ်ကာ CSS ကို တစ်ချက်နှိပ်ရုံဖြင့် ကူးယူပါ။Border Radius ဖန်တီးကိရိယာဆလိုက်ဒါများဖြင့် ထောင့်တစ်ခုစီကို လုံးဝန်းစေပြီး၊ elliptical မုဒ်ဖြင့် သဘာဝကျသော blob ပုံစံများကို ဖန်တီးကာ CSS ကို ချက်ချင်း ကူးယူပါ။Flexbox ဖန်တီးကိရိယာflex container နှင့် ၎င်း၏ အိုင်တမ်များကို visual control များဖြင့် သတ်မှတ်ပါ၊ layout ပြောင်းလဲပုံကို တိုက်ရိုက်ကြည့်ရှုပြီး CSS ကို တစ်ချက်နှိပ်ရုံဖြင့် ကူးယူပါ။CSS Grid ဖန်တီးကိရိယာသင့် columns နှင့် rows များကို သတ်မှတ်ပါ၊ အိုင်တမ်များ နေရာချရန် ဆဲလ်များပေါ်တွင် ဆွဲယူပါ၊ grid CSS နှင့် ကိုက်ညီသော HTML ကို တစ်ချက်နှိပ်ရုံဖြင့် ကူးယူပါ။CSS clamp() တွက်ချက်ကိရိယာမျက်နှာပြင်အသေးနှင့် အကြီးအတွက် အရွယ်အစားတစ်ခုကို ထည့်သွင်းပြီး ၎င်းတို့အကြား ချောမွေ့စွာ ပြောင်းလဲပေးနိုင်သော clamp() တန်ဖိုးကို ရယူပါ — စာလုံးအရွယ်အစား၊ padding၊ margin သို့မဟုတ် gap များအတွက် သုံးနိုင်သည်။အရောင်ပြောင်းလဲကိရိယာHEX, RGB, HSL, HSV, CMYK နှင့် LAB အကြား အရောင်များကို ပြောင်းလဲပါ — မည်သည့်အကွက်ကိုမဆို ပြင်ဆင်ပါက ကျန်အကွက်များ အလိုအလျောက် အပ်ဒိတ်ဖြစ်သွားပါမည်။CSS Beautifier & Minifierရှုပ်ပွနေသော CSS ကို ဖတ်ရလွယ်အောင် ပြန်လည်ပုံစံချပါ သို့မဟုတ် သင့်စည်းမျဉ်းများကို မပြောင်းလဲစေဘဲ ဘေးကင်းစွာ ချုံ့လိုက်ပါ။Contrast စစ်ဆေးကိရိယာWCAG contrast အချိုးနှင့် မည်သည့် AA နှင့် AAA အဆင့်များ အောင်မြင်သည်ကို ကြည့်ရှုရန် စာသားနှင့် နောက်ခံအရောင်ကို ထည့်သွင်းပါ။