CSS Radial Gradients
CSS Radial Gradients
radial gradient ကို ၎င်း၏ဗဟိုက သတ်မှတ်သည်။
အ၀ါရောင် gradient ဖန်တီးရန်အတွက် အနည်းဆုံး အရောင်မှတ်တိုင်နှစ်ခုကိုလည်း သတ်မှတ်ရပါမည်။
အထားအသို
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
ပုံသေအားဖြင့် ပုံသဏ္ဍာန်သည် ellipse ဖြစ်ပြီး၊ အရွယ်အစားသည် အဝေးဆုံးထောင့်ဖြစ်ပြီး တည်နေရာသည် ဗဟိုဖြစ်သည်။
Radial Gradient - အညီအမျှ နေရာယူထားသော အရောင်ရပ်များ (၎င်းသည် မူရင်းဖြစ်သည်)
အောက်ဖော်ပြပါ ဥပမာသည် အညီအမျှ နေရာချထားသော အရောင်ရပ်တန့်မှုများဖြင့် အချင်းများသော အရောင်အသွေးကို ပြသသည်-
ဥပမာ
#grad {
background-image: radial-gradient(red, yellow, green);
}
Radial Gradient - ခြားနားစွာ ခြားထားသော အရောင်ရပ်တန့်မှုများ
အောက်ဖော်ပြပါ ဥပမာသည် မတူညီသော နေရာချထားသော အရောင်ရပ်တန့်မှုများဖြင့် အချင်းများသော အရောင်အသွေးကို ပြသသည်-
ဥပမာ
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Shape သတ်မှတ်ပါ။
ပုံသဏ္ဍာန်ဘောင်သည် ပုံသဏ္ဍာန်ကို သတ်မှတ်သည်။ ၎င်းသည် တန်ဖိုး စက်ဝိုင်း သို့မဟုတ် ellipse ကို ယူနိုင်သည်။ မူရင်းတန်ဖိုးမှာ ellipse ဖြစ်သည်။
အောက်ဖော်ပြပါ ဥပမာသည် စက်ဝိုင်းပုံသဏ္ဍာန်နှင့် အစွန်းအထင်းရောင်ခြယ်မှုတစ်ခုကို ပြသသည်-
ဥပမာ
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
ကွဲပြားခြားနားသောအရွယ်အစားသော့ချက်စာလုံးများကိုအသုံးပြုခြင်း။
အရွယ်အစား ကန့်သတ်ချက်သည် gradient ၏ အရွယ်အစားကို သတ်မှတ်သည်။ တန်ဖိုးလေးခုယူနိုင်သည်-
- အနီးစပ်ဆုံး
- အဝေးဆုံး
- အနီးဆုံးထောင့်
- အဝေးဆုံးထောင့်
ဥပမာ
အရွယ်အစားအမျိုးမျိုးသောသော့ချက်စာလုံးများပါသည့် အစွန်းအထင်းရောင်ခြယ်မှုတစ်ခု-
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
radial-gradient ကို ထပ်ခါထပ်ခါ
ထပ်ခါတလဲလဲ-radial-gradient() လုပ်ဆောင်ချက်ကို radial gradient များကို ထပ်ခါတလဲလဲလုပ်ရန်အတွက် အသုံးပြုသည်-
ဥပမာ
ထပ်ခါတလဲလဲ radial gradient-
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}