CSS Box Shadow ဖန်တီးကိရိယာ၏ လုပ်ဆောင်ပုံ
ဤ Box Shadow ဖန်တီးကိရိယာသည် ဝဘ်ဒီဇိုင်းဒြပ်စင်များအတွက် စိတ်ကြိုက် box-shadow များကို ဆလိုက်ဒါများ အသုံးပြု၍ အလွယ်တကူ ဖန်တီးနိုင်ရန် ကူညီပေးသည်။ အရိပ်တစ်ခု၏ ဂုဏ်သတ္တိအမျိုးမျိုးကို ချိန်ညှိနိုင်ပြီး ပိုမိုနက်ရှိုင်းပြီး လက်တွေ့ကျသော အကျိုးသက်ရောက်မှုများ ရရှိစေရန် အရိပ်အလွှာ (shadow layers) အမြောက်အမြားကို ထပ်ဆင့်ဖန်တီးနိုင်သည်။ ပြုပြင်ပြောင်းလဲမှုများ ပြုလုပ်ပြီးပါက ထွက်ပေါ်လာသော CSS ကုဒ်ကို မိမိ၏ ပရောဂျက်များတွင် အသုံးပြုရန် ချက်ချင်း ကူးယူနိုင်သည်။
ဤကိရိယာတွင် အလွှာငါးခုကို ကြိုတင်ပြင်ဆင်ပေးထားပြီး ပထမဆုံးအလွှာ၏ မူလတန်ဖိုးများကို 0 8 24 -4 နှင့် ၁၈ ရာခိုင်နှုန်း ပွင့်လင်းမြင်သာမှုရှိသော အနက်ရောင် (18% transparent black) အဖြစ် သတ်မှတ်ထားကာ ကျန်ရှိသောအလွှာများကို အစပိုင်းတွင် ဖျောက်ထားပေးသည်။
အသုံးပြုနိုင်သော ထည့်သွင်းမှုများနှင့် လုပ်ဆောင်ချက်များ
အရိပ်တစ်ခုကို ပုံဖော်ရန်အတွက် အောက်ပါ ထည့်သွင်းမှုများကို အသုံးပြုနိုင်သည်။
- အလျားလိုက် ရွေ့လျားမှု (Horizontal offset): အရိပ်ကို ဘယ် သို့မဟုတ် ညာသို့ ရွှေ့ရန် ဆလိုက်ဒါဖြစ်ပြီး -50px မှ 50px အထိ သတ်မှတ်နိုင်သည်။
- ဒေါင်လိုက် ရွေ့လျားမှု (Vertical offset): အရိပ်ကို အပေါ် သို့မဟုတ် အောက်သို့ ရွှေ့ရန် ဆလိုက်ဒါဖြစ်ပြီး -50px မှ 50px အထိ သတ်မှတ်နိုင်သည်။
- ဝေဝါးမှု (Blur): အရိပ်၏ အနားသတ်များကို ပျော့ပျောင်းဝေဝါးသွားစေရန် ဆလိုက်ဒါဖြစ်ပြီး 0px မှ 100px အထိ သတ်မှတ်နိုင်သည်။
- ပျံ့နှံ့မှု (Spread): အရိပ်ကို ဝေဝါးခြင်းမပြုမီ ၎င်း၏အရွယ်အစားကို ကျယ်စေရန် သို့မဟုတ် ကျဉ်းစေရန် ဆလိုက်ဒါဖြစ်ပြီး -50px မှ 50px အထိ သတ်မှတ်နိုင်သည်။ အနှုတ်တန်ဖိုး သတ်မှတ်ပါက အရိပ်ကို အတွင်းဘက်သို့ ဆွဲယူပေးသည်။
- အရိပ်အရောင်: အရိပ်အတွက် အသုံးပြုလိုသော အရောင်ကို ရွေးချယ်ပေးသည့် color picker ဖြစ်သည်။
- ကြည်လင်မှု (Opacity): အရိပ်၏ ပွင့်လင်းမြင်သာမှုကို ချိန်ညှိပေးသည့် ဆလိုက်ဒါ ဖြစ်သည်။
- အတွင်းဘက်အရိပ် (Inset shadow): အရိပ်ကို ဒြပ်စင်၏ အတွင်းဘက်သို့ ကျရောက်စေရန် ပြောင်းလဲပေးသည့် ခလုတ်ဖြစ်သည်။
- အလွှာအသစ်ထည့်ရန်: မူလတန်ဖိုးများပါဝင်သော အရိပ်အလွှာအသစ်တစ်ခု ထပ်ထည့်ရန် ခလုတ်ဖြစ်သည်။
- အလွှာဖယ်ရှားရန်: ရွေးချယ်ထားသော အရိပ်အလွှာကို ဖျက်ပစ်ရန် ခလုတ်ဖြစ်သည်။
ရလဒ်ပြသမှုနှင့် စည်းမျဉ်းများ
ဆလိုက်ဒါများကို ရွှေ့လိုက်တိုင်း CSS ရလဒ်သည် အချိန်နှင့်တပြေးညီ ပြောင်းလဲသွားမည်ဖြစ်သည်။ အလွှာတစ်ခုချင်းစီအတွက် အောက်ပါတန်ဖိုးများကို ဖော်ပြပေးသည်။
- အလွှာ: သီးခြားအရိပ်အလွှာတစ်ခုချင်းစီ၏ အညွှန်း။
- အလျားလိုက် ရွေ့လျားမှု (Horizontal offset)၊ ဒေါင်လိုက် ရွေ့လျားမှု (Vertical offset)၊ ဝေဝါးမှု (Blur)၊ ပျံ့နှံ့မှု (Spread)၊ အရိပ်အရောင် နှင့် ကြည်လင်မှု (Opacity) တို့၏ လက်ရှိသတ်မှတ်ထားသော တန်ဖိုးများ။
- အတွင်းဘက်အရိပ် (Inset shadow): ၎င်းရွေးချယ်မှု ဖွင့်ထားခြင်း ရှိ/မရှိ အခြေအနေ။
- CSS: ထွက်ပေါ်လာသော box-shadow ဆိုင်ရာ CSS ကုဒ်။
အလွှာတစ်ခုထက်မက အသုံးပြုထားပါက ထွက်ပေါ်လာသော CSS ကုဒ်တွင် ၎င်းတန်ဖိုးများကို ကော်မာ (comma-separated values) များခြား၍ စနစ်တကျ ဖော်ပြပေးမည်ဖြစ်သည်။
ကိုယ်ရေးအချက်အလက် လုံခြုံမှုဆိုင်ရာ မူဝါဒ
အရိပ်တစ်ခုစီကို သင့်ဘရောက်ဆာထဲတွင် တိုက်ရိုက်ဖော်ပြပေးခြင်းဖြစ်သည်။ သင်သတ်မှတ်သမျှကို BroBroGo သို့ တင်ပို့မည်မဟုတ်ပါ။
မကြာခဏမေးလေ့ရှိသော မေးခွန်းများ (FAQ)
Offset၊ blur နှင့် spread တို့က အမှန်တကယ် ဘာကို ထိန်းချုပ်ပေးသနည်း။
Offset သည် အရိပ်ကို ဘယ်/ညာ နှင့် အပေါ်/အောက် ရွှေ့ပေးသည်၊ blur သည် ၎င်း၏အနားသတ်များကို ဝေဝါးပျော့ပျောင်းစေပြီး၊ spread သည် ဝေဝါးခြင်းမပြုမီ အရိပ်ကို ကျယ်စေ သို့မဟုတ် ကျဉ်းစေသည်။ အနှုတ်တန်ဖိုးရှိသော spread သည် အရိပ်ကို အတွင်းသို့ ကျုံ့စေပြီး ကျဉ်းမြောင်းကပ်လျက်ရှိသော အရိပ်တစ်ခုအတွက် အသုံးဝင်သည်။
Inset ရွေးချယ်မှုက ဘာလုပ်ပေးသလဲ။
သာမန်အရိပ်သည် ကတ်တစ်ခု၏ နောက်ကွယ်ရှိ အလင်းကဲ့သို့ အစိတ်အပိုင်း၏ အပြင်ဘက်သို့ ကျရောက်သည်။ Inset သည် ၎င်းကို အတွင်းဘက်သို့ ပြောင်းပြန်လှန်ပေးသောကြောင့် အစိတ်အပိုင်းသည် အတွင်းသို့ ချိုင့်ဝင်နေသကဲ့သို့ မြင်ရသည် — ၎င်းသည် ချိုင့်ဝင်နေသော input များ သို့မဟုတ် ဖိထားသော ခလုတ်များအတွက် အသုံးဝင်သည်။
အရိပ်အလွှာ တစ်ခုထက်မကကို ဘာကြောင့် ထပ်ဆင့်အသုံးပြုသင့်သလဲ။
အရိပ်တစ်ခုတည်းသာ သုံးပါက အရွယ်အစားတစ်ခုထက်ကျော်လွန်လျှင် ပြားချပ်ချပ်ကြီး ဖြစ်နေတတ်သည်။ အမှန်တကယ် ကြွတက်နေသော ပုံစံရရှိရန် ကျဉ်းမြောင်းပြီး ရင့်သောအရိပ်တစ်ခုနှင့် ပျော့ပျောင်းပြီး ကျယ်ပြန့်သော အရိပ်တစ်ခုကို ပေါင်းစပ်လေ့ရှိသည် — ထိုအကျိုးသက်ရောက်မှုကို ရရှိရန် ဒုတိယအလွှာတစ်ခု ထပ်ထည့်ပြီး တစ်ခုစီကို သီးခြားစီ ညှိယူပါ။