linear-gradient လုပ်ဆောင်ချက်
linear-gradient လုပ်ဆောင်ချက်သည် မျဉ်းဖြောင့်ရောင်စဉ်တန်းကို
သတ်မှတ်ပေးသည်။ နောက်ခံပုံကို သတ်မှတ်ပေးသော ဂုဏ်သတ္တိများ-
background,
background-image
သို့မဟုတ် နယ်နမိတ်ပုံကို သတ်မှတ်ပေးသော ဂုဏ်သတ္တိများ-
border-image,
background-image-source.
တွင်အသုံးပြုနိုင်သည်။
ဝါကျဖွဲ့ပုံ
selector {
background: linear-gradient([ထောင့်သို့မဟုတ် ဦးတည်ချက်], color1 size1, color2 size2...);
}
တန်ဖိုးများ
| တန်ဖိုး | ဖော်ပြချက် |
|---|---|
| ဦးတည်ချက် |
ရောင်စဉ်တန်း၏ ဦးတည်ချက်ကို သတ်မှတ်ပေးသည်။ ထောင့်အတွက် ယူနစ်များ အနေဖြင့်
သို့မဟုတ် သော့ချက်စကားလုံးများဖြစ်သော top, left, right, bottom
သို့မဟုတ် ၎င်းတို့၏ ပေါင်းစပ်မှုများtop left, top right စသဖြင့် ဖြင့် သတ်မှတ်နိုင်သည်။
စကားလုံးများ၏ အစီအစဥ်သည် အရေးမကြီးပါtop left နှင့် left top ဟု ရေးနိုင်ပြီး
ကွာခြားချက်မရှိပါ။ ၎င်းသည် ရွေးချယ်စရာ parameter ဖြစ်သည်။ အကယ်၍ မရေးပါက၊ ရောင်စဉ်တန်းသည်
အပေါ်မှအောက်သို့ (to top ဖြင့် ရေးသည့်အခါကဲ့သို့) သွားမည်ဖြစ်သည်။ ဦးတည်ချက်၏ ရှေ့တွင် to ဟူသော စကားလုံးကို ထည့်ရသည်။
|
| ထောင့် | ထောင့်အတွက် ယူနစ်များ အတွင်း ထောင့်တစ်ခု။ အပြုသင်္ကေတ သို့မဟုတ် အပျက်သင်္ကေတ ဖြစ်နိုင်သည်။ ရွေးချယ်စရာ parameter ဖြစ်သည်။ တစ်ချိန်တည်းတွင် ထောင့် သို့မဟုတ် ဦးတည်ချက် (သို့မဟုတ် ဘာမှမဖြစ်) တစ်ခုကို သတ်မှတ်နိုင်သည်။ |
| color1 | ရောင်စဉ်တန်း၏ အစအရောင်ကို အရောင်အတွက် ယူနစ်များ အတွင်း သတ်မှတ်နိုင်သည်။ |
| color2 | ရောင်စဉ်တန်း၏ အဆုံးအရောင်ကို အရောင်အတွက် ယူနစ်များ အတွင်း သတ်မှတ်နိုင်သည်။ |
| size | ရောင်စဉ်တန်း၏ အရောင်တစ်ခုခု၏ ပမာဏကို အရွယ်အစားအတွက် ယူနစ်များ အတွင်း သတ်မှတ်ပေးသည်။ |
ဥပမာ . အရိုးရှင်းဆုံးပုံစံ
ဝါကျဖွဲ့ပုံ:
selector {
background: linear-gradient(start color, end color);
}
ဥပမာဖြင့် ကြည့်ကြပါစို့:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
ဥပမာ . ထောင့်ကို ထည့်ခြင်း
ဝါကျဖွဲ့ပုံ:
selector {
background: linear-gradient(angle, start color, end color);
}
ဥပမာဖြင့် ကြည့်ကြပါစို့:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
ဥပမာ . ဦးတည်ချက်ကို ထည့်ခြင်း
ထောင့်အစား ဦးတည်ချက်ကို ထည့်နိုင်သည်။
top, left, right, bottom
သို့မဟုတ် ၎င်းတို့၏ ပေါင်းစပ်မှုများtop left, top right
ဦးတည်ချက်၏ ရှေ့တွင် to ဟူသော စကားလုံးကို ထည့်ရသည်။
ဝါကျဖွဲ့ပုံ:
selector {
background: linear-gradient(direction, start color, end color);
}
ဥပမာဖြင့် ကြည့်ကြပါစို့:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
ဥပမာ . ဦးတည်ချက်ကို ထည့်ခြင်း
အခြားဦးတည်ချက်ကို သတ်မှတ်ကြည့်ပါ:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
ဥပမာ . အရွယ်အစားကို ထည့်ခြင်း
ဝါကျဖွဲ့ပုံ:
selector {
background: linear-gradient(color1 size1, color2 size2);
}
အောက်ပါဥပမာတွင် လုပ်ဆောင်ချက်မှာ အောက်ပါအတိုင်းဖြစ်သည်-
အနီရောင်စင်ကြယ်သောအရောင်သည် 0px မှ
30px အထိဖြစ်ပြီး၊ 30px မှ 50px အထိ
အနီရောင်မှ အပြာရောင်သို့ ရောင်စဉ်တန်းဖြစ်ကာ၊
50px နှင့် အဆုံးအထိ အနီရောင်မှ အပြာရောင်သို့ ရောင်စဉ်တန်းဖြစ်သည်-
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
ဥပမာ . 2 ထက်ပိုသော အရောင်များကို ထည့်ခြင်း
ဝါကျဖွဲ့ပုံ:
selector {
background: linear-gradient(color1 size1, color2 size2, color3 size3...);
}
အောက်ပါဥပမာတွင် လုပ်ဆောင်ချက်မှာ အောက်ပါအတိုင်းဖြစ်သည်-
အနီရောင်စင်ကြယ်သောအရောင်သည် 0px မှ
30px အထိဖြစ်ပြီး၊ 30px မှ 50px အထိ
အနီရောင်မှ အပြာရောင်သို့ ရောင်စဉ်တန်းဖြစ်ကာ၊
50px မှ 70px အထိ အပြာရောင်မှ အစိမ်းရောင်သို့ ရောင်စဉ်တန်းဖြစ်ပြီး၊
70px နောက်ပိုင်းတွင် အစိမ်းရောင်စင်ကြယ်သောအရောင်ဖြစ်သည်-
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
ဥပမာ . ရုတ်တရက် အပြောင်းအလဲများ
အောက်ပါဥပမာတွင် လုပ်ဆောင်ချက်မှာ အောက်ပါအတိုင်းဖြစ်သည်-
အနီရောင်စင်ကြယ်သောအရောင်သည် 0px မှ
30px အထိဖြစ်ပြီး၊ အပြာရောင်စင်ကြယ်သောအရောင်သည် 30px
မှ 60px အထိဖြစ်ကာ၊ အစိမ်းရောင်စင်ကြယ်သောအရောင်သည် 60px နောက်ပိုင်းတွင်
ဖြစ်သည် (red 0px ကို မရေးလည်း ရသည်) -
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
ဥပမာ . အရွယ်အစားများကို ရာခိုင်နှုန်းဖြင့်လည်း သတ်မှတ်နိုင်သည်
အောက်ပါဥပမာတွင် လုပ်ဆောင်ချက်မှာ အောက်ပါအတိုင်းဖြစ်သည်-
အနီရောင်စင်ကြယ်သောအရောင်သည် 0% မှ
30% အထိဖြစ်ပြီး၊ အပြာရောင်စင်ကြယ်သောအရောင်သည် 30%
မှ 60% အထိဖြစ်ကာ၊ အစိမ်းရောင်စင်ကြယ်သောအရောင်သည် 60% နောက်ပိုင်းတွင်
ဖြစ်သည် (red 0% ကို မရေးလည်း ရသည်) -
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
ဥပမာ . background-size နှင့် ပေါင်းစပ်အသုံးပြုခြင်း
အောက်ပါဥပမာတွင် လုပ်ဆောင်ချက်မှာ အောက်ပါအတိုင်းဖြစ်သည်-
အနီရောင်စင်ကြယ်သောအရောင်သည် 0px မှ
30px အထိဖြစ်ပြီး၊ အပြာရောင်စင်ကြယ်သောအရောင်သည် 30px
မှ 60px အထိဖြစ်ကာ၊ ၎င်းအားလုံးသည် 60px အပိုင်းလေးများဖြင့်
ထပ်ခါထပ်ခါ ပြန်လည်ဖြစ်ပေါ်နေမည် (background-size:
60px; ကြောင့်) -
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
ဆက်လက်ဖတ်ရှုရန်
-
radial-gradientလုပ်ဆောင်ချက်၊
အခြေတကျရောင်စဉ်တန်းကို ဖန်တီးပေးသည် -
repeating-linear-gradientလုပ်ဆောင်ချက်၊
ထပ်ခါထပ်ခါဖြစ်ပေါ်နေသော မျဉ်းဖြောင့်ရောင်စဉ်တန်းကို ဖန်တီးပေးသည် -
repeating-radial-gradientလုပ်ဆောင်ချက်၊
ထပ်ခါထပ်ခါဖြစ်ပေါ်နေသော အခြေတကျရောင်စဉ်တန်းကို ဖန်တီးပေးသည်
