CSS Gradient များ၏ အခြေခံသဘောတရားများ
CSS gradient များသည် ဝဘ်ဒီဇိုင်းတွင် နောက်ခံပုံရိပ်များအဖြစ် အသုံးပြုနိုင်သော အရောင်ကူးပြောင်းမှုများကို ဖန်တီးပေးသည်။ ၎င်းတို့ကို အသုံးပြုခြင်းဖြင့် သီးခြားပုံရိပ်ဖိုင်များ တင်ရန်မလိုဘဲ ဝဘ်စာမျက်နှာ၏ နောက်ခံများကို လှပစွာ ပုံဖော်နိုင်သည်။ Gradient တစ်ခုကို ဖန်တီးရာတွင် ၎င်း၏ အမျိုးအစား၊ အရောင်များ ကူးပြောင်းမည့် လမ်းကြောင်း သို့မဟုတ် ပုံသဏ္ဌာန်နှင့် အရောင်များ တည်ရှိမည့် နေရာများကို သတ်မှတ်ပေးရမည်ဖြစ်သည်။
Linear Gradient များ၏ လမ်းကြောင်းနှင့် အရောင်ရပ်တန့်မှုများ
Linear gradient (မျဉ်းဖြောင့်ပုံစံ) သည် အရောင်များကို မျဉ်းဖြောင့်တစ်လျှောက် ပေါင်းစပ်ပေးသည်။ ဤအမျိုးအစားတွင် အရောင်များ စီးဆင်းမည့် လမ်းကြောင်းကို ထောင့် (Angle) ဖြင့် သတ်မှတ်သည်။
- ထောင့် (Angle) သတ်မှတ်ချက်: ထောင့်တန်ဖိုး 0° သည် အပေါ်သို့ တည့်တည့်ညွှန်ပြပြီး 90° သည် ညာဘက်သို့ ညွှန်ပြသည်။
- အရောင်ရပ်တန့်မှုများ (Color stops): အရောင်တစ်ခုစီကို gradient လမ်းကြောင်းပေါ်ရှိ သတ်မှတ်ထားသော ရာခိုင်နှုန်းနေရာတွင် ချိတ်တွဲထားသည်။ လမ်းကြောင်း၏ အစမှတ်သည် 0% ဖြစ်ပြီး အဆုံးမှတ်သည် 100% ဖြစ်သည်။
Radial Gradient များ၏ ပုံသဏ္ဌာန်နှင့် အရောင်ပျံ့နှံ့မှု
Radial gradient (အဝိုင်းပုံစံ) သည် အရောင်များကို အလယ်ဗဟိုမှ စတင်ကာ အပြင်ဘက်သို့ ပျံ့နှံ့စေသည်။ ဤအမျိုးအစားသည် ထောင့် (Angle) တန်ဖိုးကို အသုံးမပြုပါ။ ၎င်းအစား အောက်ပါ ပုံသဏ္ဌာန်နှစ်မျိုးထဲမှ တစ်ခုကို ရွေးချယ်ရမည်ဖြစ်သည်။
- ဘဲဥပုံ (Ellipse): အရောင်များကို ဘဲဥပုံစံအတိုင်း အပြင်ဘက်သို့ ဖြန့်ကျက်ပေးသည်။
- စက်ဝိုင်း (Circle): အရောင်များကို စက်ဝိုင်းပုံစံအတိုင်း ညီညာစွာ ပျံ့နှံ့စေသည်။
Conic Gradient များ၏ အရောင်ဖြန့်ကျက်ပုံ
Conic gradient (ကုန်းပုံစံ) သည် အရောင်များကို အလယ်ဗဟိုကို ဗဟိုပြု၍ အရောင်စက်ဝိုင်းတစ်ခုကဲ့သို့ ပတ်ပတ်လည် လှည့်ပတ်ကာ ဖြန့်ကျက်ပေးသည်။ Linear gradient ကဲ့သို့ပင် ၎င်း၏ စတင်ရာ လမ်းကြောင်းကို ထောင့် (Angle) ဆလိုက်ဒါဖြင့် သတ်မှတ်နိုင်ပြီး 0° သည် အပေါ်သို့ ညွှန်ပြကာ 90° သည် ညာဘက်သို့ ညွှန်ပြသည်။
Color Stop များ၏ အခန်းကဏ္ဍနှင့် ကန့်သတ်ချက်များ
Color stop တစ်ခုစီသည် gradient လမ်းကြောင်းပေါ်တွင် အရောင်တစ်ရောင်ကို တိကျသော ရာခိုင်နှုန်းနေရာတစ်ခု၌ သတ်မှတ်ပေးခြင်းဖြစ်သည်။
- ကနဦးတန်ဖိုးများ: ကိရိယာကို စတင်ဖွင့်ချိန်တွင်
#6366f1 0%နှင့်#ec4899 100%ဟူသော ကနဦး color stop နှစ်ခု ပါဝင်နေမည်ဖြစ်သည်။ - အသစ်ထည့်သွင်းခြင်း: Stop အသစ်တစ်ခုကို ထပ်ထည့်ပါက ၎င်း၏ ကနဦးနေရာသည် 50% တွင် အလိုအလျောက် တည်ရှိမည်ဖြစ်သည်။
- အများဆုံးကန့်သတ်ချက်: Color stop များကို ရှစ်ခုအထိသာ အသုံးပြုနိုင်သည်။ အရောင်ရပ်တန့်မှု ရှစ်ခုပြည့်သွားပါက "Stop အသစ်ထည့်ရန်" ခလုတ်ကို အသုံးပြု၍ရတော့မည်မဟုတ်ပါ။
Gradient ဖန်တီးကိရိယာကို အသုံးပြုနည်း
ဤ Gradient ဖန်တီးကိရိယာကို အသုံးပြု၍ CSS gradient ကုဒ်များကို အောက်ပါအဆင့်များအတိုင်း လွယ်ကူစွာ ထုတ်ယူနိုင်သည်။
- Gradient အမျိုးအစား ရွေးချယ်ခြင်း: "Gradient အမျိုးအစား" အောက်တွင် "မျဉ်းဖြောင့်ပုံစံ (Linear)"၊ "အဝိုင်းပုံစံ (Radial)" သို့မဟုတ် "ကုန်းပုံစံ (Conic)" ထဲမှ တစ်ခုကို ရွေးချယ်ပါ။
- လမ်းကြောင်း သို့မဟုတ် ပုံသဏ္ဌာန် ညှိယူခြင်း: Linear နှင့် Conic အမျိုးအစားများအတွက် "ထောင့် (Angle)" ကို ညှိယူပါ။ Radial အမျိုးအစားအတွက် "ပုံသဏ္ဌာန်" အောက်ရှိ "ဘဲဥပုံ (Ellipse)" သို့မဟုတ် "စက်ဝိုင်း (Circle)" ကို ရွေးချယ်ပါ။
- Color Stop များ သတ်မှတ်ခြင်း: "အရောင်ရပ်တန့်မှုများ (Color stops)" ကဏ္ဍတွင် "Stop အရောင်" နှင့် "နေရာ (Position)" ရာခိုင်နှုန်းများကို ညှိယူပါ။ လိုအပ်ပါက "Stop အသစ်ထည့်ရန်" သို့မဟုတ် "Stop ဖယ်ရှားရန်" ကို အသုံးပြုနိုင်သည်။
- ကုဒ်ရယူခြင်း: အစမ်းကြည့်ရှုမှုတွင် စိတ်တိုင်းကျဖြစ်ပါက "CSS" ကဏ္ဍအောက်ရှိ "CSS ကူးယူရန်" ခလုတ်ကို နှိပ်ပါ။ ကူးယူပြီးပါက ခလုတ်၏ စာသားသည် "Copied" ဟု ပြောင်းလဲသွားမည်ဖြစ်သည်။
ကိုယ်ရေးအချက်အလက် လုံခြုံမှုနှင့် လုပ်ဆောင်ပုံ
ဤကိရိယာတွင် gradient တစ်ခုစီကို သင့်ဘရောက်ဆာထဲတွင် တိုက်ရိုက်ဖော်ပြပေးခြင်းဖြစ်သည်။ သင်သတ်မှတ်သမျှကို BroBroGo သို့ တင်ပို့မည်မဟုတ်ပါ။
အမေးများသော မေးခွန်းများ (FAQ)
မေး - linear၊ radial နှင့် conic gradient တို့၏ ကွာခြားချက်မှာ အဘယ်နည်း။
ဖြေ - linear gradient သည် သင်သတ်မှတ်ထားသော ထောင့်အတိုင်း မျဉ်းဖြောင့်တစ်လျှောက် အရောင်များကို ပေါင်းစပ်ပေးသည်။ radial gradient သည် ၎င်းတို့ကို အလယ်ဗဟိုမှ အပြင်ဘက်သို့ စက်ဝိုင်း သို့မဟုတ် ဘဲဥပုံစံဖြင့် ပျံ့နှံ့စေသည်။ conic gradient သည် ၎င်းတို့ကို အရောင်စက်ဝိုင်းကဲ့သို့ အလယ်ဗဟိုကို လှည့်ပတ်၍ ဖြန့်ကျက်ပေးသည်။
မေး - Color stop ဆိုသည်မှာ အဘယ်နည်း။
ဖြေ - color stop တစ်ခုစီသည် gradient ၏ လမ်းကြောင်းတစ်လျှောက် သတ်မှတ်ထားသော နေရာတစ်ခုတွင် ရှိသော အရောင်ဖြစ်သည် — အစတွင် 0% နှင့် အဆုံးတွင် 100% ဖြစ်သည်။ အရောင် ပေါ်လွင်မည့်နေရာကို ရွှေ့ရန် stop ကို ရွှေ့ပါ၊ သို့မဟုတ် ပိုမိုလှပသော ပေါင်းစပ်မှုရရှိရန် stop များ ထပ်ထည့်ပါ။ ရှစ်ခုအထိ အသုံးပြုနိုင်သည်။
မေး - လမ်းကြောင်းကို မည်သို့ ထိန်းချုပ်ရမည်နည်း။
ဖြေ - linear သို့မဟုတ် conic gradient အတွက်မူ angle ဆလိုက်ဒါသည် လမ်းကြောင်းကို သတ်မှတ်ပေးသည် — 0° သည် အပေါ်သို့ ညွှန်ပြပြီး 90° သည် ညာဘက်သို့ ညွှန်ပြသည်။ radial gradient တွင်မူ angle မရှိပါ၊ ၎င်းအစား ပျံ့နှံ့ပုံကို ပြောင်းလဲရန် circle သို့မဟုတ် ellipse ပုံသဏ္ဌာန်ကို ရွေးချယ်ပါ။