CSS Gradients
CSS gradient များသည် သင့်အား သတ်မှတ်ထားသော အရောင်နှစ်ခု သို့မဟုတ် ထို့ထက်ပိုသော အရောင်များကြားတွင် ချောမွေ့သော ကူးပြောင်းမှုများကို ပြသနိုင်စေပါသည်။
CSS သည် gradients အမျိုးအစားသုံးမျိုးကို သတ်မှတ်သည်-
- Linear Gradiments (အတက်/အဆင်း/ဘယ်/ညာ/ထောင့်ဖြတ်)
- Radial Gradients (၎င်းတို့၏ဗဟိုမှသတ်မှတ်သည်)
- Conic Gradients (ဗဟိုအမှတ်တစ်ဝိုက်တွင် လှည့်ပတ်ထားသည်)
CSS Linear Gradients
linear gradient ဖန်တီးရန် အနည်းဆုံး အရောင်မှတ်တိုင်နှစ်ခုကို သတ်မှတ်ရပါမည်။ အရောင်မှတ်တိုင်များသည် ချောမွေ့သောအကူးအပြောင်းများကြားတွင် သင်လုပ်ဆောင်လိုသော အရောင်များဖြစ်သည်။ စမှတ်တစ်ခုနှင့် ဦးတည်ချက် (သို့မဟုတ် ထောင့်တစ်ခု) ကို gradient effect နှင့်အတူ သင်သတ်မှတ်နိုင်သည်။
အထားအသို
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
လမ်းညွှန် - အပေါ်မှအောက်ခြေ (၎င်းသည် မူရင်းဖြစ်သည်)
အောက်ဖော်ပြပါ ဥပမာသည် အပေါ်မှအစပြုသော linear gradient ကိုပြသသည်။ ၎င်းသည် အနီမှ စတင်ကာ အဝါရောင်သို့ ကူးပြောင်းသည်-
ဥပမာ
#grad {
background-image: linear-gradient(red, yellow);
}
ဦးတည်ချက် - ဘယ်မှညာ
အောက်ဖော်ပြပါ ဥပမာသည် ဘယ်ဘက်မှစတင်သည့် linear gradient ကိုပြသသည်။ ၎င်းသည် အနီမှ စတင်ကာ အဝါရောင်သို့ ကူးပြောင်းသည်-
ဥပမာ
#grad {
background-image: linear-gradient(to right, red , yellow);
}
ဦးတည်ချက် - ထောင့်ဖြတ်
အလျားလိုက်နှင့် ဒေါင်လိုက် စတင်သည့် အနေအထား နှစ်ခုလုံးကို သတ်မှတ်ခြင်းဖြင့် သင်သည် gradient ကို ထောင့်ဖြတ်ဖြင့် ပြုလုပ်နိုင်သည်။
အောက်ဖော်ပြပါ ဥပမာသည် ဘယ်ဘက်အပေါ်မှစတင်သည် (နှင့်အောက်ခြေညာဘက်သို့သွားသည်) မျဉ်းဖြောင့်အရောင်ကိုပြသထားသည်။ ၎င်းသည် အနီမှ စတင်ကာ အဝါရောင်သို့ ကူးပြောင်းသည်-
ဥပမာ
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Angles ကိုအသုံးပြုခြင်း။
gradient ၏ ဦးတည်ရာကို ပိုမိုထိန်းချုပ်လိုပါက၊ ကြိုတင်သတ်မှတ်ထားသော လမ်းကြောင်းများ (အောက်ခြေ၊ အပေါ်မှ၊ ညာဘက်၊ ဘယ်၊ အောက်ခြေ၊ ညာဘက်စသည်) အစား ထောင့်တစ်ခုကို သတ်မှတ်နိုင်သည်။ 0deg ၏တန်ဖိုးသည် "အပေါ်သို့" နှင့်ညီမျှသည်။ 90deg ၏တန်ဖိုးသည် "ညာဘက်သို့" နှင့်ညီမျှသည်။ 180deg ၏တန်ဖိုးသည် "အောက်ခြေမှ" နှင့်ညီမျှသည်။
အထားအသို
background-image: linear-gradient(angle, color-stop1, color-stop2);
အောက်ဖော်ပြပါ ဥပမာသည် linear gradients တွင် angles များကို အသုံးပြုပုံကို ပြသည်-
ဥပမာ
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Multiple Color Stops ကိုအသုံးပြုခြင်း။
အောက်ဖော်ပြပါ ဥပမာတွင် အရောင်အဆင်းများစွာရှိသော မျဉ်းဖြောင့်အရောင် (အပေါ်မှအောက်ခြေ) ကို ပြသသည်-
ဥပမာ
#grad {
background-image: linear-gradient(red, yellow, green);
}
အောက်ဖော်ပြပါ ဥပမာသည် သက်တံ၏အရောင်နှင့် စာသားအချို့ဖြင့် linear gradient (ဘယ်မှညာသို့) ဖန်တီးနည်းကို ပြသသည်-
ဥပမာ
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Transparency ကိုအသုံးပြုခြင်း။
CSS gradients များသည် ပွင့်လင်းမြင်သာမှုကိုလည်း ပံ့ပိုးပေးပါသည်။
ပွင့်လင်းမြင်သာမှုထည့်ရန်၊ ကျွန်ုပ်တို့သည် အရောင်မှတ်တိုင်များကို သတ်မှတ်ရန် rgba() လုပ်ဆောင်ချက်ကို အသုံးပြုသည်။ rgba() လုပ်ဆောင်ချက်ရှိ နောက်ဆုံးဘောင်သည် 0 မှ 1 အထိ တန်ဖိုးတစ်ခု ဖြစ်နိုင်ပြီး ၎င်းသည် အရောင်၏ ပွင့်လင်းမြင်သာမှုကို သတ်မှတ်သည်- 0 သည် ပွင့်လင်းမြင်သာမှုကို ညွှန်ပြသည်၊ 1 သည် အရောင်အပြည့်အစုံကို ညွှန်ပြသည် (ပွင့်လင်းမြင်သာမှု မရှိ)။
အောက်ဖော်ပြပါ ဥပမာသည် ဘယ်ဘက်မှစတင်သည့် linear gradient ကိုပြသသည်။ ၎င်းသည် အပြည့်အ၀ ဖောက်ထွင်းမြင်ရပြီး အရောင်အပြည့် အနီရောင်သို့ ကူးပြောင်းသွားသည်-
ဥပမာ
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
linear-gradient ကို ထပ်ခါထပ်ခါ
ထပ်ခါတလဲလဲ-linear-gradient() လုပ်ဆောင်ချက်ကို linear gradient များကို ထပ်ခါတလဲလဲရန် အသုံးပြုသည်-
ဥပမာ
ထပ်ခါတလဲလဲ မျဉ်းဖြောင့်အရောင်အဆင်း-
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}