CSS linear-gradient() လုပ်ဆောင်ချက်
ဥပမာ
ဤမျဉ်းဖြောင့်အရောင်အဆင်းသည် ထိပ်မှစတင်သည်။ ၎င်းသည် အနီမှစတင်ကာ အဝါသို့ကူးပြောင်းပြီးနောက် အပြာသို့ပြောင်းလဲသွားသည်-
#grad {
background-image: linear-gradient(red, yellow, blue);
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
linear-gradient() function သည် linear gradient ကို နောက်ခံပုံအဖြစ် သတ်မှတ်သည်။
linear gradient ဖန်တီးရန် အနည်းဆုံး အရောင်မှတ်တိုင်နှစ်ခုကို သတ်မှတ်ရပါမည်။ အရောင်မှတ်တိုင်များသည် ချောမွေ့သောအကူးအပြောင်းများကြားတွင် သင်လုပ်ဆောင်လိုသော အရောင်များဖြစ်သည်။ စမှတ်တစ်ခုနှင့် ဦးတည်ချက် (သို့မဟုတ် ထောင့်တစ်ခု) ကို gradient effect နှင့်အတူ သင်သတ်မှတ်နိုင်သည်။
Linear Gradient ၏ ဥပမာ-
ဗားရှင်း- | CSS3 |
---|
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် လုပ်ဆောင်ချက်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
-webkit-၊ -moz- သို့မဟုတ် -o- ဖြင့်လိုက်သောနံပါတ်များသည် ရှေ့ဆက်တွဲတစ်ခုနှင့်အလုပ်လုပ်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပေးသည်။
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
CSS Syntax
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
နောက်ထပ် ဥပမာများ
ဥပမာ
ဘယ်ဘက်မှ စတင်သည့် မျဉ်းဖြောင့်အရောင်။ ၎င်းသည် အနီမှစတင်ကာ အပြာသို့ ကူးပြောင်းသည်-
#grad {
background-image: linear-gradient(to right, red , blue);
}
ဥပမာ
ဘယ်ဘက်အပေါ်မှစတင်သည် (နှင့်အောက်ခြေညာဘက်သို့သွားသော linear gradient)
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
ဥပမာ
သတ်မှတ်ထားသောထောင့်ဖြင့် မျဉ်းဖြောင့်အရောင်အဆင်း-
#grad {
background-image: linear-gradient(180deg, red, blue);
}
ဥပမာ
များပြားသော အရောင်မှတ်တိုင်များပါရှိသော linear gradient-
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
ဥပမာ
ပွင့်လင်းမြင်သာမှုရှိသော linear gradient-
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Gradients