CSS Conic Gradients
CSS Conic Gradients
conic gradient သည် ဗဟိုပွိုင့်တစ်ဝိုက်တွင် လှည့်ပတ်ထားသော အရောင်အကူးအပြောင်းများရှိသော gradient တစ်ခုဖြစ်သည်။
conic gradient ဖန်တီးရန် အနည်းဆုံး အရောင်နှစ်မျိုး သတ်မှတ်ရပါမည်။
အထားအသို
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
ပုံမှန်အားဖြင့်၊ ထောင့် သည် 0deg ဖြစ်ပြီး အနေအထား သည် ဗဟိုဖြစ်သည်။
ဒီဂရီ မ သတ်မှတ်ပါက၊ အရောင်များသည် အလယ်အမှတ်တစ်ဝိုက်တွင် အညီအမျှ ပျံ့နှံ့သွားမည်ဖြစ်သည်။
Conic Gradient- အရောင်သုံးမျိုး
အောက်ဖော်ပြပါ ဥပမာတွင် အရောင်သုံးရောင်ရှိသော conic gradient ကို ပြသသည်-
ဥပမာ
အရောင်သုံးမျိုးရှိသော conic gradient
#grad {
background-image: conic-gradient(red, yellow, green);
}
Conic Gradient- အရောင်ငါးမျိုး
အောက်ဖော်ပြပါ ဥပမာတွင် အရောင်ငါးရောင်ရှိသော conic gradient ကို ပြသသည်-
ဥပမာ
အရောင်ငါးမျိုးရှိသော conic gradient တစ်ခု
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Conic Gradient- အရောင်သုံးမျိုးနှင့် ဒီဂရီ
အောက်ဖော်ပြပါ ဥပမာတွင် အရောင်သုံးရောင်နှင့် အရောင်တစ်ခုစီအတွက် ဒီဂရီတစ်ခုပါရှိသော conic gradient ကို ပြသသည်-
ဥပမာ
အရောင်တစ်ခုစီအတွက် အရောင်သုံးရောင်နှင့် ဒီဂရီတစ်ခုပါရှိသော conic gradient တစ်ခု-
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Pie Charts ဖန်တီးပါ။
border-radius: 50%conic gradient ကို pie တစ်ခုလိုဖြစ်အောင် ထည့် လိုက်ရုံပါပဲ။
ဥပမာ
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
ဤသည်မှာ အရောင်အားလုံးအတွက် သတ်မှတ်ထားသော ဒီဂရီများပါသော အခြားအဝိုင်းပုံဇယားဖြစ်သည်-
ဥပမာ
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Conic Gradient ကို Angle မှသတ်မှတ်ထားသည်။
[from angle ] သည် conic gradient တစ်ခုလုံးကို လှည့်ပတ်သည့်ထောင့်ကို သတ်မှတ်သည်။
အောက်ပါဥပမာသည် 90deg ထောင့်မှ conic gradient ကိုပြသသည်-
ဥပမာ
ထောင့်မှ ပုံသဏ္ဍာန် ပုံသဏ္ဍာန်တစ်ခု-
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
သတ်မှတ်ထားသော စင်တာ အနေအထားဖြင့် အဝိုင်းပုံစံ အရောင်အသွေး
[ at position ] သည် conic gradient ၏ အလယ်ဗဟိုကို သတ်မှတ်သည်။
အောက်ဖော်ပြပါ ဥပမာတွင် 60% 45% ရှိသော အလယ်ဗဟိုအနေအထားရှိသော conic gradient ကို ပြသည်-
ဥပမာ
သတ်မှတ်ထားသော အလယ်ဗဟိုအနေအထားဖြင့် ပုံကြီးကျသော အရောင်အသွေး-
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Conic Gradient ကို ထပ်လုပ်ခြင်း။
repeating-conic-gradient()conic gradient များကို ထပ်ခါတလဲလဲလုပ်ရန် function ကိုအသုံးပြုသည် -
ဥပမာ
ထပ်ခါတလဲလဲ conic gradient-
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
ဤသည်မှာ သတ်မှတ်ထားသော အရောင်-အစများနှင့် အရောင်-ရပ်ခြင်းများဖြင့် ထပ်ခါတလဲလဲ conic gradient ဖြစ်ပါသည်-
ဥပမာ
သတ်မှတ်ထားသော အရောင်-အစများနှင့် အရောင်-ရပ်တန့်မှုများဖြင့် ထပ်ခါတလဲလဲ conic gradient-
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
CSS Gradient လုပ်ဆောင်ချက်များ
အောက်ပါဇယားတွင် CSS gradient လုပ်ဆောင်ချက်များကို စာရင်းပြုစုထားသည်။
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |