CSS3 Linear gradient

by ဂျနီဖာ Kyrnin

04 ၏ 01

CSS3 နှင့်အတူလက်ဝါးကပ်တိုင်-Browser ကို Linear gradient Creating

#fff (အဖြူ) ကို # 999 (မှောင်မိုက်မီးခိုးရောင်) ၏ညာဘက် left ကနေတစ်ဦးကရိုးရှင်းပြီး linear gradient ကို။ J ကို Kyrnin

linear gradient

သင်မြင်ပါလိမ့်မယ် gradient ကို၏အသုံးအများဆုံးအမျိုးအစားနှစ်ခုအရောင် linear gradient ကိုဖြစ်ပါတယ်။ ဒါက gradient ကိုကြောင်းလိုင်းတလျှောက်ဒုတိယဖို့ပထမဦးဆုံးအရောင်ကနေတဖြည်းဖြည်းပြောင်းလဲလာမယ့်ဖြောင့်အညီရွှေ့မည်ကိုဆိုလိုသည်။ ဤစာမျက်နှာပေါ်ရှိအဆိုပါပုံရိပ် #fff (အဖြူ) ကို # 999 (မှောင်မိုက်မီးခိုးရောင်) ၏ရိုးရှင်းလက်ဝဲမှလက်ယာ gradient ကိုပြသသည်။

linear gradient သတ်မှတ်ဖို့အလွယ်ကူဆုံးဖြစ်ကြသည်ကို၎င်း, browser များတွင်အများဆုံးထောက်ခံမှုရှိသည်။ CSS3 linear gradient ကို Android 2.3+, Chrome ကို 1+, Firefox ကို 3.6+, အော်ပရာ 11.1+, နဲ့ Safari 4+ အတွက်ထောက်ခံနေကြသည်။ Internet Explorer အား filter ကို အသုံးပြု. gradients add ပြန် IE ကို 5.5 မှသူတို့ကိုထောကျပံ့နိုငျသညျ။ ဤသည် CSS3 သည်မဟုတ်, က Cross-browser ကိုလိုက်ဖက်မှုတစ်ခု option တစ်ခုဖြစ်သည်။

သင်တစ်ဦး gradient ကိုသတ်မှတ်အခါသင်အများအပြားကွဲပြားခြားနားသောအရာတို့ကိုသတ်မှတ်ဖို့လိုအပ်:

က linear သို့မဟုတ် radial is- gradient ကိုဘယျလိုအမြိုးအစား
အဆိုပါ gradient ကိုစတင်သင့်အဘယ်မှာရှိ
အဆိုပါ gradient ကိုရပ်တန့်သင့်အဘယ်မှာရှိ
အဘယ်အရာကိုအရောင်များဟာ gradient ကို၌ရှိကြ၏ဘယ်မှာသူတို့စတင်ရပ်တန့်သင့်တယ်

CSS3 သုံးပြီး linear gradient သတ်မှတ်ပေးရန်, သငျသညျရေးလိုက်:

linear-gradient ကို (ထောင့်သို့မဟုတ်အခြမ်းသို့မဟုတ်ထောင့်, အရောင်ရပ်တန့်, အရောင်ရပ်တန့်)

ပထမဦးဆုံးအသငျသညျနာမတျောအ linear -gradient နှင့်အတူ gradient ကိုအမျိုးအစားကိုသတ်မှတ်။
ထို့နောက်သင်စတင်သတ်မှတ်နှင့်နည်းလမ်းနှစ်ခုထဲကတစ်ခုအတွက် gradient ကို၏ရမှတ်ကိုရပ်တန့်: 0 ဒီဂရီဖြောင့်ဖွင့်ညွှန်ပြနှင့်အတူပါ 0 င်ကနေ 359 ဒီဂရီအတွင်းလိုင်း၏ထောင့်။ ဒါမှမဟုတ် "ဘက်သို့မဟုတ်ထောင့်" တဲ့ function နှင့်အတူ, ထိုကဲ့သို့သော left, ညာ, အောက်ခြေနှင့်ထိပ်တန်းအဖြစ်။ ဤရွေ့ကားလာမယ့်စာမျက်နှာပေါ်တွင်အသေးစိတ်ရှင်းပြပါလိမ့်မည်။ သင်တို့သည်ဤအထဲကစွန့်ခွာလျှင်, gradient ကို၎င်းဒြပ်စင်၏အောက်ခြေမှထိပ်ကနေစီးဆင်းလိမ့်မယ်။
ထိုအခါသင်ကအရောင်မှတ်တိုင်များသတ်မှတ်။ သင်ကအရောင်အရောင်ကုဒ်နှင့်တစ်ဦး optional ကိုရာခိုင်နှုန်းနှင့်အတူရပ်သတ်မှတ်။ ရာခိုင်နှုန်းလိုင်းပေါ် start သို့မဟုတ်အရောင်နှင့်အတူအဆုံးသတ်ရန်ရှိရာဘရောက်ဇာကိုပြောပြသည်။ ကို default မျဉ်းတစ်လျှောက်တွင်အညီအမျှအရောင်တွေနေရာဖြစ်ပါတယ်။ သငျသညျစာမျက်နှာ 3 ရက်နေ့တွင်အရောင်မှတ်တိုင်များအကြောင်းပိုမိုလေ့လာသွားမှာဖြစ်ပါတယ်။

ဒါကြောင့်, CSS3 နှင့်အတူအထက်ပါ gradient ကို define လုပ်ဖို့, သင်ရေးလိုက်:

linear-gradient ကို (100% #ffffff, # 999999 0% left);

တဖန်သင်တို့ရေးလိုက်တဲ့ div ၏နောက်ခံအဖြစ်တင်ထားရန်:

div {
နောက်ခံ-image: linear-gradient ကို (100% #ffffff, # 999999 0%, left;
}

CSS3 Linear gradient များအတွက် Browser ကို Extensions

သင့်ရဲ့ gradient ကို Cross-browser ကိုအလုပ်လုပ်ရ, သင်အများဆုံး browser များနှင့် Internet Explorer 9 နှင့်အနိမ့် (တကယ်တော့ 2 filter များ) အတွက် filter တစ်ခုအဘို့အဘရောက်ဇာကို extensions တွေကိုသုံးစွဲဖို့လိုအပ်ပါတယ်။ ဤအရာအားလုံး (သင်သာ IE ကိုအတွက် 2-အရောင် gradients သတ်မှတ်နိုင်မ မှလွဲ. ) သင့် gradient ကိုသတ်မှတ်နိုင်ရန်တူညီသောအ element တွေကိုယူပါ။

သင်ကွဲပြားခြားနားသောဘရောက်ဇာဗားရှင်းကိုထောကျပံ့ဖို့သုံးကွဲပြားခြားနားသောလိုင်းများလိုအပ်ဘာလို့လဲဆိုတော့ Microsoft ကစိစစ်မှုများနှင့်တိုးချဲ့မှု -Internet Explorer ကို, ထောက်ခံမှုမှအရှိဆုံးစိန်ခေါ်မှုဖြစ်ပါတယ်။ သငျသညျကိုရေးမယ်လို့အဖြူ gradient ကိုမှအထက်ပါမီးခိုးရောင် get to:

/ * IE ကို 5.5-7 * /
filter ကို: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999' endColorstr = '# ffffff' GradientType = 1);
/ * IE ကို 8-9 * /
-ms-filter ကို: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999' endColorstr = '# ffffff' GradientType = 1)";
/ * IE ကို 10 * /
-ms-linear-gradient ကို (100% #ffffff, # 999999 0% left);

Mozilla ကအိတ်စတန်းရှင်းရတာဟာ -moz- extension ကိုဖွင့် -moz- extension ကိုနှင့်တကွ, CSS3 ပိုင်ဆိုင်မှုနဲ့တူအလုပ်လုပ်ပါတယ်။ Firefox အတွက်အထက်ပါ gradient ကိုရရန်, ရေးရန်:

linear-gradient ကို--moz (100% #ffffff, # 999999 0% left);

အော်ပရာတိုးချဲ့မှုရတာဟာ -o- extension ကိုအော်ပရာ 11.1+ မှ gradients ကထပ်ပြောသည်။ အထက်ပါ gradient ကိုရရန်, ရေးရန်:

linear-gradient ကို--O (100% #ffffff, # 999999 0% left);

Webkit တိုးချဲ့မှုရတာဟာ -webkit- extension ကိုတစ်ဦးစာရေး CSS3 ပိုင်ဆိုင်မှုနဲ့တူအလုပ်လုပ်ပါတယ်။ သငျသညျကိုရေး 10+ Safari က 5.1+ သို့မဟုတ် Chrome အတွက်အထက်ပါ gradient ကိုသတ်မှတ်ရန်:

-webkit-linear-gradient ကို (100% #ffffff, # 999999 0% left);

Chrome ကို 2+ နှင့် Safari 4+ နှင့်အတူအလုပ်လုပ်တယ်သော Webkit extension ကိုတစ်ဦးအဟောင်းတွေဗားရှင်းလည်းရှိပါသည်။ အထဲတွင်သင်ကအစားအိမ်ခြံမြေနာမ၌ထက်တန်ဖိုးအဖြစ် gradient ကိုအမျိုးအစားကိုသတ်မှတ်။ ဤ extension နှင့်အတူအဖြူရောင် gradient ကိုမှမီးခိုးရောင်ရရန်, ရေးရန်:

-webkit-gradient ကို (linear, လက်ဝဲဘက်ထိပ်, ညာဘက်ထိပ်, အရောင်-stop (0%, # 999999), အရောင်-stop (100% # ffffff));

အပြည့်အဝ CSS3 Linear Gradient CSS ကို Code ကို

သငျသညျအထကျအဖြူရောင် gradient ကိုမှမီးခိုးရောင်ပထမဦးဆုံး gradients ကိုထောကျပံ့ပါဘူး, သူ, နောက်ဆုံးသောပစ္စည်းကိုအပြည့်အဝလိုက်နာဖြစ်ကြောင်း browser များများအတွက် CSS3 စတိုင်ဖြစ်သင့်ကြောင်း browser များများအတွက် fallback အစိုင်အခဲအရောင်တို့ပါဝင်သည်သင့်ပါတယ်ရဖို့အပြည့်အဝ Cross-browser ကိုထောက်ခံမှုသည်။ ဒါကြောင့်, သင်ရေးလိုက်:

နောက်ခံ: # 999999;
နောက်ခံ: -moz-linear-gradient ကို (100% #ffffff, # 999999 0%, left);
နောက်ခံ: -webkit-gradient ကို (linear, လက်ဝဲဘက်ထိပ်, ညာဘက်ထိပ်, အရောင်-stop (0%, # 999999), အရောင်-stop (100% # ffffff));
နောက်ခံ: -webkit-linear-gradient ကို (100% #ffffff, # 999999 0% left);
နောက်ခံ: -O-linear-gradient ကို (100% #ffffff, # 999999 0%, left);
နောက်ခံ: -ms-linear-gradient ကို (100% #ffffff, # 999999 0% left);
filter ကို: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999' endColorstr = '# ffffff' GradientType = 1);
-ms-filter ကို: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999' endColorstr = '# ffffff' GradientType = 1);
နောက်ခံ: linear-gradient ကို (100% #ffffff, # 999999 0% left);

ဒီသင်ခန်းစာအတွက်လာမယ့်စာမကျြနှာကိုပိုပြီးအသေးစိတ်အတွက် gradient ကို၏အစိတ်အပိုင်းများကိုရှင်းပြပါနှင့်, နောက်ဆုံးစာမျက်နှာကိုအလိုအလျောက် CSS3 gradients ကိုဖန်တီးရန်အကောင်းဆုံးနည်းလမ်းဖြစ်ပါတယ်တဲ့ tool ကိုရန်သင့်အားထောက်ပြသည်။

ကိုယ့် CSS ကိုသုံးပြီးအရေးယူ၌ဤ linear gradient ကိုကြည့်ရှုပါ။

04 ၏ 02

အဆိုပါ Gradient ၏ထောင့်ဖြတ် gradient-အဆိုပါ Angle Creating

45 ဒီဂရီထောင့်မှာတစ်ဦးက gradient ကို။ J ကို Kyrnin

စတင်ချိန်ရပ်နားမှတ် gradient ကို၏ထောင့်ဆုံးဖြတ်ရန်။ အများစုမှာ linear gradient ထိပ်ကနေအောက်ခြေသို့မဟုတ်ညာဘက် left မှဖြစ်ကြသည်။ ဒါပေမယ့်တစ်ထောင့်ဖြတ်မျဉ်းကြောင်းပေါ်လှုံ့ဆျောတဲ့ gradient ကိုတည်ဆောက်ရန်ဖြစ်နိုင်ပါတယ်။ ဤစာမျက်နှာပေါ်ရှိအဆိုပါပုံရိပ် left မှလက်ျာဘက်ကနေ image ကိုဖြတ်ပြီးတစ် 45degree ထောင့်များတွင်လှုံ့ဆော်ပေးမယ့်ရိုးရှင်းတဲ့ gradient ကိုပြသသည်။

အဆိုပါ Gradient လိုင်း Define မှထောင့်

အဆိုပါထောင့်စင်၏ဗဟိုအနေနဲ့စိတ်ကူးယဉ်စက်ဝိုင်းပေါ်မှာလိုင်းဖြစ်ပါတယ်။ 0deg ညာဘက်, 90deg မှတ်အထိထောက်ပြ, 180deg ချထောက်ပြသည်နှင့်လက်ဝဲမှ 270deg အချက်များ။ သငျသညျ 0 မှ 359 ဒီဂရီမဆိုထောင့်သတ်မှတ်ပေးနိုင်သည်။

သင်တစ်ဦးစတုရန်းအတွက်တစ်ဦးကို 45 ဒီဂရီထောင့်အောက်ခြေညာဘက်ထိပ်ဘယ်ဖက်ထောင့်ကနေလှုံ့ဆော်ပေးပေမယ့်သင်ပုံတွင်တွေ့မြင်နိုင်သည်အဖြစ်စတုဂံအတွင်းက start နှင့်အဆုံးမှတ်, ပုံသဏ္ဍာန်အပြင်ဘက်အနည်းငယ်ဖြစ်ကြောင်းမှတ်သားသင့်တယ်။

တစ်ထောင့်ဖြတ် gradient ကိုသတ်မှတ်ပေးဖို့ပိုမိုဘုံလမ်းထိုကဲ့သို့သောညာဘက်ထိပ်ကဲ့သို့၎င်း, ထောင့်သတ်မှတ်ဖို့ဖြစ်ပါတယ်နှင့် gradient ကိုဆန့်ကျင်ဘက်ထောင့်မှထောင့်ကနေရွှေ့မည်။ သင့်အနေဖြင့်အောက်ပါသော့ချက်စာလုံးများနှင့်အတူစတင် postion သတ်မှတ်နိုင်သည်

ထိပ်တန်း
မှန်သော
အောကျခွေ
လက်ဝဲ
အလယ်ဗဟို

: ထိုသူတို့ကဲ့သို့သောပိုမိုတိကျတဲ့ဖြစ်ပေါင်းစပ်နိုင်ပါတယ်

ညာဘက်ထိပ်
ဘယ်ဘက်ထိပ်
ထိပ်တန်းစင်တာ
ညာဘက်အောက်
အောက်ခြေလက်ဝဲ
အောက်ခြေအလယ်ဗဟို
လက်ျာဘက်အလယ်ဗဟို
ကျန်ရစ်စင်တာ

ဤတွင် left အောက်ဆုံးမှညာဘက်ထိပ်ထောင့်ကနေပြောင်းရွှေ့အဖြူမှအနီတပုံဆင်တူတဲ့ gradient ကို, များအတွက် CSS ကိုဖြစ်ပါသည်:

နောက်ခံ: ## 901A1C;
နောက်ခံ-image: -moz-linear-gradient ကို (ညာထိပ်, # 901A1C 0% # FFFFFF 100%);
နောက်ခံ-image: -webkit-gradient ကို (linear, ညာဘက်ထိပ်, လက်ဝဲဘက်အောက်ခြေတွင်အရောင်-stop (0, # 901A1C), အရောင်-stop (1, #FFFFFF));
နောက်ခံ: (100% #ffffff ညာဘက်ထိပ်, # 901A1C 0%) -webkit-linear-gradient ကို;
နောက်ခံ: (100% #ffffff ညာဘက်ထိပ်, # 901A1C 0%) -O-linear-gradient ကို;
နောက်ခံ: (100% #ffffff ညာဘက်ထိပ်, # 901A1C 0%) -ms-linear-gradient ကို;
နောက်ခံ: (100% #ffffff ညာဘက်ထိပ်, # 901A1C 0%) linear-gradient ကို;

သငျသညျအဘယ်သူမျှမ IE ကို filter များကဒီဥပမာထဲမှာရှိပါတယ်သတိပြုမိကြပေမည်။ အောက်ခြေထိပ်တန်း (ကို default) နှင့် (အ GradientType = 1 switch သည်နှင့်အတူ) လက်ျာ left: IE ကိုသာ filter များနှစ်မျိုးခွင့်ပြုဘာဖြစ်လို့လဲဆိုတော့သောကွောငျ့ဖွစျသညျ။

ကိုယ့် CSS ကိုသုံးပြီးအရေးယူ၌ဤထောင့်ဖြတ် linear gradient ကိုကြည့်ရှုပါ။

04 ၏ 03

အရောင်ရပ်နားမှုများ

သုံးအရောင်မှတ်တိုင်များနှင့်အတူတစ်ဦးက gradient ကို။ J ကို Kyrnin

CSS3 linear gradient နှင့်အတူ, သင်ပင် fancier သက်ရောက်မှုဖန်တီးရန်သင့် gradient ကိုမှမျိုးစုံအရောင်များကို add နိုင်ပါတယ်။ ဤအအရောင်များကိုထည့်သွင်းဖို့, သင်ကော်မာ ခွဲ. သင်၏ပိုင်ဆိုင်မှု၏အဆုံးမှအပေါ်နောက်ထပ်အရောင်များထည့်ပါ။ မျဉ်းပေါ်တွင်အရောင်များအဖြစ်ကောင်းစွာ start သို့မဟုတ်အဆုံးသတ်သင့်ရှိရာအရပ်၌သင်တို့ပါဝင်သည်သငျ့သညျ။

က Internet Explorer နှစ်ခုသာအရောင်မှတ်တိုင်များကိုထောကျပံ့ဒါကြောင့်သင်ဤ gradient ကိုတည်ဆောက်တဲ့အခါမှာသင်ပြချင်ပထမဦးဆုံးနှင့်ဒုတိယအရောင်များကိုသာပါဝင်သည်သင့်ပါတယ်စစ်ထုတ်ပေးပါတယ်။

ဤတွင်အထက်ပါ 3-အရောင် gradient ကိုများအတွက် CSS ကိုဖြစ်ပါသည်:

နောက်ခံ: #ffffff;
နောက်ခံ: -moz-linear-gradient ကို (100% #ffffff, 0% # 901A1C 51% #ffffff, left);
နောက်ခံ: -webkit-gradient ကို (linear, လက်ဝဲဘက်ထိပ်, ညာဘက်ထိပ်, အရောင်-stop (0%, # ffffff), အရောင်-stop (51% # 901A1C), အရောင်-stop (100% # ffffff));
နောက်ခံ: -webkit-linear-gradient ကို (left, 0% # 901A1C 51%, 100% ffffff # #ffffff);
နောက်ခံ: -O-linear-gradient ကို (0%, # 901A1C 51%, 100% ffffff # #ffffff, left);
နောက်ခံ: -ms-linear-gradient ကို (0%, # 901A1C 51%, 100% ffffff # #ffffff, left);
filter ကို: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff' endColorstr = '# ffffff' GradientType = 1);
နောက်ခံ: linear-gradient ကို (left, 0% # 901A1C 51%, 100% ffffff # #ffffff);

ကိုယ့် CSS ကိုသုံးပြီးအရေးယူသုံးခုအရောင်မှတ်တိုင်များနှင့်အတူဤ linear gradient ကိုကြည့်ရှုပါ။

04 ၏ 04

အဆောက်အဦး gradient ပိုလွယ် Make

အဆုံးစွန် CSS ကို Gradient Generator ကို။ J ကို Kyrnin ယဉ်ကျေး ColorZilla အားဖြင့်စခရင်ပုံ

ငါသူတို့တစ်ဦးချင်းစီကသူတို့ကိုမှအကြိုးခံစားခှငျ့မြားနှငျ့အားနည်းချက်များရှိသည်, gradients တည်ဆောက်ရန်သင့်အားကူညီပေးနေဘို့အကြံပြုနှစ်ခုဆိုဒ်များရှိပါတယ်, ငါသည်အသေးအရာအားလုံးကိုမတစ်ဦး gradient ကိုဆောက်ကိုတွေ့ကြပြီမဟုတ်။

အဆုံးစွန် CSS ကို Gradient Generator ကို
က Photoshop ကိုများကဲ့သို့အစီအစဉ်များအတွက်တည်ဆောက် gradient မှအလားတူထုံးစံ၌လုပ်ဆောင်ဘာဖြစ်လို့လဲဆိုတော့ဒါက gradient ကိုမီးစက်ကအရမ်းပေါ်ပြူလာဖြစ်ပါတယ်။ ဒါကြောင့်သင်တို့ရှိသမျှသည် CSS ကို extensions တွေကိုမဟုတျဘဲကိုယ့် Webkit နှင့် Mozilla ကပေးသည်ဘာဖြစ်လို့လဲဆိုတော့ကျွန်မကိုလည်းကြိုက်တယ်။ ဒီမီးစက်တွေနဲ့ပြဿနာကိုသာအလျားလိုက်နှင့်ဒေါင်လိုက် gradients ကိုထောက်ပံ့သောကွောငျ့ဖွစျသညျ။ သငျသညျထောင့်ဖြတ် gradients လုပ်ချင်လျှင်သင်သည်ငါအကြံပြုအခြားမီးစက်ကိုသွားရန်ရှိသည်။

CSS3 Gradient Generator ကို
ဤသည်မီးစက်ကိုအနည်းငယ်ပိုရှည်နားလည်ရန်ပထမဦးဆုံးတစျခုထက်ငါ့ကိုနှုတ် ယူ. , ဒါပေမယ့်တစ်ထောင့်ဖြတ်ရန်ဦးတည်ပြောင်းလဲနေသောထောကျပံ့ပေးပါဘူး။

သင်သည်ယခုကာလထက်ပိုကောင်းကြိုက်နှစ်သက်ကြောင်းအခြား CSS ကို Gradient Generator ကိုသိလိုလျှင်, ကျေးဇူးပြုပြီး ကျွန်တော်တို့ကိုအသိပေး ။