CSS3 ကူးအပြောင်းကာလ Nice အရောင်မှိန်အကျိုးသက်ရောက်မှု Create
CSS3 အခင်းဖြစ်ပွားရာထိမှန်တဲ့အခါမှာ Web ကိုဒီဇိုင်နာများရှည်လျားသူတို့ကိုခံခဲ့ရသည်စာမျက်နှာများပိုပြီးထိန်းချုပ်ဆန္ဒရှိခဲ့သည်။ အဆိုပါ CSS3 မှာစတင်မိတ်ဆက်သစ်ကိုစတိုင်များ ကို web ပညာရှင်များမိမိတို့၏စာမျက်နှာများမှကို Photoshop ကဲ့သို့သောဆိုးကျိုးများကိုထည့်သွင်းဖို့စွမ်းရည်ကိုပေး၏။ ဤကဲ့သို့သောဂုဏ်သတ္တိပါဝင်သည် တစ်စက်မှောင်မိုက်အရိပ်နှင့် Glow , ထောင့်ဝိုင်းနှင့်ပိုပြီး။ CSS3 လည်းဆိုဒ်များတွင်ကောင်းတဲ့အပြန်အလှန်ဆက်သွယ်ဖန်တီးရန်အသုံးပြုနိုင်ကာတွန်းကဲ့သို့သောဆိုးကျိုးများမိတ်ဆက်ပေးသည်။
သင်အသုံးပြုနေတဲ့သင့်ရဲ့ website မှာအတွင်းရှိဒြပ်စင်မှထည့်သွင်းနိုင်ပါတယ်တစ်ခုမှာအလွန်ကောင်းတဲ့အမြင်အကျိုးသက်ရောက်မှု CSS3 သူတို့အဘို့ဂုဏ်သတ္တိများပေါင်းစပ် အသုံးပြု. နှင့်ထွက်လည်းညှိုးနွမ်းစေရန်ဖြစ်ပါသည် opacity ကို နှင့်အသွင်ကူးပြောင်းမှုကို။ ဤသည်မှာ site တစ်ခုဧည့်ကြောင်းဒြပ်စင်ကျော်လှုပ်ရှားကဲ့သို့တစ်ခုခုမတဲ့အခါမှာအာရုံသို့ရောက်ကြောင်းမှေးမှိန်ဒေသများဖန်တီးလျက်သင့်စာမကျြနှာကိုပိုပြီးအပြန်အလှန်စေရန်တစ်ခုလွယ်ကူပြီးကောင်းကောင်းထောက်ပံ့ထားနည်းလမ်းဖြစ်ပါတယ်။
ရဲ့ကသင်၏ဝဘ်စာမျက်နှာများပေါ်တွင်အမျိုးမျိုးသောဒြပ်စင်ရန်ဤအပြန်အလှန်အမြင်အကျိုးသက်ရောက်မှုကိုထည့်သွင်းဖို့ဘယ်လောက်လွယ်ကူသောမှာကွညျ့ကွစို့ ..
ဟော့ဗာအပေါ်ပြောင်းလဲခြင်းမထင်ရှားသော s ကို; ကြစို့ & # 39
ကျနော်တို့ဖောက်သည်တစ်ဦးကြောင့်ဒြပ်စင်ကျော်လှုပ်ရှားသောအခါပုံရိပ်တစ်ခု၏ opacity ကိုပြောင်းလဲပစ်ဖို့ဘယ်လိုကြည့်ခြင်းဖြင့်စတင်ပါလိမ့်မယ်။ ဒီဥပမာအဘို့ (ထို HTML ကိုအောက်မှာပြထားပါသည်) ငါ greydout ၏အတန်း attribute ကိုအတူပုံတစ်ပုံကိုအသုံးပြုပြီးတာပါ။
ဒါကြောင့်ထွက် greyed စေရန်, ငါတို့သည်ငါတို့၏ CSS ကိုကိုနှိပ်ပြီးမှအောက်ပါအချက်များကိုစတိုင်စည်းမျဉ်းစည်းကမ်းတွေကို add:
.greydout {
-webkit-opacity ကို: 0.25;
-moz-opacity ကို: 0.25;
opacity ကို: 0.25;
}
ဤရွေ့ကား opacity ကို setting များကို 25% မှဘာသာပြန်ဆို။ ဒါကပုံရိပ်က၎င်း၏ပုံမှန်င့်လင်းမြင်သာ၏ 1/4 အဖြစ်ပြသမည်ဖြစ်ကြောင်းကိုဆိုလိုသည်။ 0% လုံးဝပွင့်လင်းပါလိမ့်မယ်နေချိန်မှာအဘယ်သူမျှမင့်လင်းမြင်သာအတူအပြည့်အဝဒီလိုပါပဲ 100% ပါလိမ့်မယ်။
Pseudo-class ကိုပျံဝဲ: ထို့နောက် image ကိုမောက်ကတခုလုံးကိုရစ်ဝဲသောအခါ, သင်ပေါင်းထည့်မယ်လို့ (အပြည့်အဝဒီလိုပါပဲဖြစ်လာရန်ပိုမိုတိကျစွာသို့မဟုတ်) ရှင်းရှင်းလင်းလင်းလာစေ:
.greydout: မောက်စ်တင် {
-webkit-opacity ကို: 1;
-moz-opacity ကို: 1;
opacity ကို: 1;
}
သင်တို့သည်ဤဥပမာအဘို့, အဲဒီ browser များ၏ဗားရှင်းအဟောင်းအဘို့အနောက်သို့ဆုတ် Compatibility ကိုသေချာစေရန်စိုးမိုးရေး၏ရောင်းချသူ prefixed ဗားရှင်းသုံးပြီးငါသတိထားမိပါလိမ့်မယ်။ ဒီအကောင်းတစ်ဦးအလေ့အကျင့်ဖြစ်ပါတယ်နေစဉ်, အဖြစ်မှန် opacity ကိုအုပ်စိုးမှုကိုယခုကောင်းစွာ browser များကထောက်ခံကြောင်းနှင့်သူတို့အရောင်းချသူ prefixed လိုင်းများ drop ဖို့တော်တော်လုံခြုံဖြစ်ပါတယ်။ သို့တိုင်, သငျသညျအဟောင်းများကိုဘရောက်ဇာကိုဗားရှင်းအဘို့အထောက်ခံမှုသေချာချင်လျှင်, ဤရှေ့ဆက်ပါဝင်သည်ဖို့မမျှအကြောင်းပြချက်လည်းရှိသေး၏။ ရုံစတိုင်ရဲ့ပုံမှန်, un-prefix ဗားရှင်းနှင့်အတူကြေငြာအဆုံးသတ်၏လက်ခံခဲ့သည်အကောင်းဆုံးအလေ့အကျင့်အတိုင်းလိုက်နာရန်သေချာစေပါ။
သငျသညျ site တစ်ခုပေါ်မှာဤတပ်ဖြန့်ထားလျှင်, သင်သည်ဤ opacity ကိုညှိနှိုင်းမှုအလွန်ရုတ်တရက်ပြောင်းလဲမှုကြောင်းတွေ့မြင်လိမ့်မယ်။ ပထမဦးစွာပြုလုပ်မီးခိုးရောင်ရဲ့, ပြီးတော့သူကသူတို့အားနှစ်ခုအကြားမျှကြားဖြတ်အစိုးရပြည်နယ်များနှင့်အတူမဟုတ်ပါဘူး။ သို့မဟုတ်ပိတ် - ဒါဟာတစ်ဦးအလင်း switch သည်နှင့်တူ၏။ ဒါဟာသင်လိုချင်တာတွေဖြစ်နိုင်သည်, သင်မူကားကိုလည်းပိုပြီးတဖြည်းဖြည်းသောပြောင်းလဲမှုနှင့်အတူစမ်းသပ်ဖို့လိုပေမည်။
တစ်ကယ့်ကိုကောင်းတဲ့အကျိုးသက်ရောက်မှုကိုထည့်သွင်းနှင့်ဤမှိန်တဖြည်းဖြည်းချင်းလုပ်, သင် .greydout လူတန်းစားမှအကူးအပြောင်းပိုင်ဆိုင်မှုကိုထည့်သွင်းလိုသော:
.greydout {
-webkit-opacity ကို: 0.25;
-moz-opacity ကို: 0.25;
opacity ကို: 0.25;
-webkit-အကူးအပြောင်း: အားလုံး 3s လွယ်ကူခြင်း,
-moz-အကူးအပြောင်း: အားလုံး 3s လွယ်ကူခြင်း,
-ms-အကူးအပြောင်း: အားလုံး 3s လွယ်ကူခြင်း,
-O-အကူးအပြောင်း: အားလုံး 3s လွယ်ကူခြင်း,
အကူးအပြောင်း: အားလုံး 3s လွယ်ကူခြင်း,
}
ဒီကုဒ်နှင့်တကွ, ပြောင်းလဲမှုမဟုတ်ဘဲရုံရုတ်တရက် switching ထက်တဖြည်းဖြည်းပြောင်းလဲလိမ့်မယ်။
ပြီးတာနဲ့နောက်တစ်ကြိမ်ကျနော်တို့ကဒီမှာရောင်းချသူ prefixed စည်းမျဉ်းနံပါတ်သုံးပြီးနေကြသည်။ အကူးအပြောင်းအဖြစ်ကောင်းစွာ opacity ကိုအဖြစ်ကိုမထောက်ပံ့ဖြစ်တယ်, ဒါသည်ဤရှေ့ဆက်သဘောမျိုးလုပ်လုပ်ပါ။
သင်တို့သည်ဤ interaction ကစီစဉ်အဖြစ်မှတ်မိဖို့အရာတစ်ခုမှာထိတွေ့မျက်နှာပြင် devices တွေကိုတစ်ဦး "မောက်စ်တင်" ပြည်နယ်ရှိသည်မဟုတ်ကြဘူးဆိုတာပါပဲ, ဒါသည်ဤဆိုးကျိုးများမကြာခဏမိုဘိုင်းဖုန်းကဲ့သို့ထိတွေ့မျက်နှာပြင် device ကို အသုံးပြု. မည်သူမဆိုအပေါ်ရှုံးနိမ့်နေကြသည်။ အဆိုပါအကူးအပြောင်းကိုမကြာခဏဖြစ်ပျက်ပါလိမ့်မယ်, ဒါပေမယ့်သူတို့ကယ့်ကိုမြင်ကြရနိုင်မှာမဟုတ်ဘူးဒါကြောင့်အစာရှောင်တွေ့ကြုံတတ်၏။ သင်တစ်ဦးကောင်းတဲ့ဆုကြေးငွေအကျိုးသက်ရောက်မှုအဖြစ်ဤဖြည့်စွက်, ဒါပေမယ့်နားလည်သဘောပေါက်ထားရန်တွင်ပါဝင်သောအကြောင်းအရာများကိုထင်ရှားစေခြင်းငှါလိုသည်ဟုမဆိုအပြောင်းအလဲများကိုရှောင်ရှားနေကြသည်လျှင်ဒဏ်ငွေဖြစ်ပါသည်။
အထဲကနွမ်းလွန်းဖြစ်နိုင်ပါ့မလားဖြစ်ပါသည်
သင်အပြည့်အဝဒီလိုပါပဲပုံရိပ်ကိုထံမှထွက်လည်းညှိုးနွမ်းဖို့အသွင်ကူးပြောင်းမှုနှင့် opacity ကိုအသုံးပွုနိုငျတစ်မှေးမှိန်ပုံရိပ်နှင့်အတူစတင်နိုင်ရန်ရှိသည်မဟုတ်ကြဘူး။ သာ withfadeout တစ်လူတန်းစားနှင့်အတူ, တူညီတဲ့ image ကိုအသုံးပြုခြင်း:
အတန်းအစား = "withfadeout">
မောက်စ်တင် selector: ရုံမရောက်မီကဲ့သို့သင်သုံးပြီး opacity ကိုပြောင်းလဲစေ:
.withfadeout {
-webkit-အကူးအပြောင်း: အားလုံး 2S ဖြေလျှော့-In-ထွက်;
-moz-အကူးအပြောင်း: အားလုံး 2S ဖြေလျှော့-In-ထွက်;
-ms-အကူးအပြောင်း: အားလုံး 2S ဖြေလျှော့-In-ထွက်;
-O-အကူးအပြောင်း: အားလုံး 2S ဖြေလျှော့-In-ထွက်;
အကူးအပြောင်း: အားလုံး 2S ဖြေလျှော့-In-ထွက်;
}
.withfadeout: မောက်စ်တင် {
-webkit-opacity ကို: 0.25;
-moz-opacity ကို: 0.25;
opacity ကို: 0.25;
}
ဒီဥပမာထဲမှာ, image ကိုအတန်ငယ်ပွင့်လင်းဖို့အပြည့်အဝဒီလိုပါပဲထံမှပြောင်းလဲမယ်လို့ - ကျွန်တော်တို့ရဲ့ပထမဦးဆုံးဥပမာများ၏ပြောင်းပြန်။
Images ကို ကျော်လွန်. Going
ဒါဟာသင်တို့သည်ဤအမြင်အကူးအပြောင်းလျှောက်ထားနိုင်သည်ကိုအလွန်အစွမ်းထက်တဲ့ရဲ့ပုံရိပ်တွေကိုမှ်လည်းကြွေတတ်ပေမယ့်သင်ရုံကဤ CSS ကိုအကျိုးသက်ရောက်မှုများနှင့်အတူပုံရိပ်တွေကို အသုံးပြု. ဖို့ကန့်သတ်မရှိကြပေ။ သင်အလွယ်တကူနှိပ်လိုက်နှင့်ကျင်းပသည့်အခါလည်းညှိုးနွမ်းကြောင်း CSS ကို-style အမျိုးမျိုးခလုတ်စေနိုင်သည်။ သင်ရုံသုံးပြီး opacity ကိုသတ်မှတ်ထားလိမ့်မယ်: တက်ကြွ Pseudo-class နဲ့ခလုတ်ကိုသတ်မှတ်ပါတယ်သောအတန်းအစားအပေါ်အကူးအပြောင်း၌ထားလေ၏။ ဘာဖြစ်သွားမလဲဆိုတာကိုကြည့်ဖို့ဒီခလုတ်ကိုနှိပ်ပါကိုင်ထားပါ။
ဒါဟာတခုလုံးကိုရစ်ဝဲသို့မဟုတ်ပေါ်တွင်နှိပ်လိုက်တဲ့အခါမှာမရှိမဖြစ်လိုအပ်တဲ့ဆိုအမြင်အာရုံဒြပ်စင်မှိန်စေရန်တတ်နိုင်သမျှပါပဲ။ ဒီဥပမာမှာငါ div ၏ opacity ကိုနှင့်မောက်စ်ကပြီးဆုံးသည့်အခါစာသားရဲ့အရောင်ကိုပြောင်းပေးပါ။ ဤတွင် CSS ကိုဖြစ်ပါသည်:
#myDiv {
width: 280px;
background-color: # 557A47;
အရောင်: #dfdfdf;
padding ကို: 10px;
-webkit-အကူးအပြောင်း: အားလုံး 4s ဖြေလျှော့ထုတ် 0 စက္ကန့်;
-moz-အကူးအပြောင်း: အားလုံး 4s ဖြေလျှော့ထုတ် 0 စက္ကန့်;
-ms-အကူးအပြောင်း: အားလုံး 4s လွယ်ကူခြင်း-ထွက် 0 စက္ကန့်;
-O-အကူးအပြောင်း: အားလုံး 4s ဖြေလျှော့ထုတ် 0 စက္ကန့်;
အကူးအပြောင်း: အားလုံး 4s လွယ်ကူခြင်း-ထွက် 0 စက္ကန့်;
}
#myDiv: မောက်စ်တင် {
-webkit-opacity ကို: 0.25;
-moz-opacity ကို: 0.25;
opacity ကို: 0.25;
အရောင်: # 000;
}
Navigation Menu နောက်ခံအရောင်များနွမ်းထဲကနေကြိုးနိုင်သလား
ဒီရိုးရှင်းတဲ့အညွှန်း Menu ထဲမှာနောက်ခံအရောင်မီနူးပစ္စည်းများကျော်ငါ mouse ကိုအဖြစ်ထွက်တဖြည်းဖြည်းလျော့ကျကုန်သည်။ ဒီမှာက HTML ဖြစ်ပါသည်:
- နေအိမ်
- CSS3 ကျူတိုရီရယ်
- CSS3 Properties ကို
ထိုအဒီမှာ CSS ကိုဖြစ်ပါသည်:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
display: inline;
float: left;
padding ကို: 5px 15px;
margin: 0 5px;
-webkit-အကူးအပြောင်း: အားလုံး 2S linear;
-moz-အကူးအပြောင်း: အားလုံး 2S linear;
-ms-အကူးအပြောင်း: အားလုံး 2S linear;
-O-အကူးအပြောင်း: အားလုံး 2S linear;
အကူးအပြောင်း: အားလုံး 2S linear;
}
ul # sampleNav li တစ် {text-decoration: none; }
ul # sampleNav li: မောက်စ်တင် {
background-color: # DAF197;
}
Browser ကိုပံ့ပိုးမှု
ငါပြီးသားအကြိမ်အနည်းငယ်အပေါ်သို့ထိမိခဲ့ကြသကဲ့သို့ပင်ဤစတိုင်များအလွန်ကောင်းသောဘရောက်ဇာကိုထောက်ခံမှုရှိသည်, ဒါကြောင့်သင်သည်မည်သည့် trepidation မပါဘဲသူတို့ကိုသုံးစွဲဖို့အခမဲ့ခံစားရသင့်တယ်။ ဒီရန်တစ်ခုတည်းသောခြွင်းချက်က Internet Explorer တာအဟောင်းတွေဗားရှင်းဖြစ်ပါတယ်, ဒါပေမယ့် 11 အောက်တွင်ဖော်ပြထားသော IE ကိုအပေါငျးတို့သဗားရှင်းများအတွက်ထောက်ခံမှုအဆုံးသတ် Microsoft ရဲ့မကြာသေးခင်ကဆုံးဖြတ်ချက်နှင့်အတူဤအဟောင်းတွေ browser များပြဿနာများ၏လျော့နည်းခြင်းနှင့်လျော့နည်းဖြစ်လာကြပြီ - အဟောင်း browser ကိုမလျှင်, လက်တွေ့ကျကျ အဓိကပြဿနာကမဖြစ်သင့်သောဤမှိန်အကူးအပြောင်း, ကြည့်ရှုပါ။ နေသမျှကာလပတ်လုံးသင်ပျော်စရာ interaction ကမှသက်ရောက်မှုဤမျိုးဖြစ်စေအကျဉ်းချထားခြင်းနှင့်လုပ်ဆောင်နိုင်စွမ်းကိုမောင်းသို့မဟုတ် key ကိုအကြောင်းအရာထုတ်ဖေါ်ဖို့သူတို့အပေါ်မှာအားကိုးကြဘူးအဖြစ်, ထိုသက်ရောက်မှုကိုထောကျပံ့မအဟောင်းတွေ browser များတစ်လျော့နည်းပျော်စရာအတှေ့အကွုံရလိမ့်မယ်, ဒါပေမဲ့အဲဒီ browser များပေါ်အသုံးပြုသူများသည်မဟုတ်တောင်မှလိမ့်မည် သူတို့ကပုံမှန်အတိုင်း site ကိုသုံးပါနှင့်သူတို့လိုအပျကွောငျးသတငျးအခကျြရနိုငျအထူးသဖြင့်လျှင်, ခြားနားချက်ကိုငါသိ၏။
အပိုပျော်စရာ; နှစ်ဦး Images ကိုဖလှယ်ရန်
ဤတွင်အခြားသို့တဦးတည်းပုံရိပ်ညှိုးနွမ်းစေရန်မည်သို့ဥပမာတစ်ခုဖြစ်ပါတယ်။ က HTML ကိုသုံးပါ:
နှင့်အခြားအပြည့်အဝဒီလိုပါပဲနေစဉ်တဦးတည်းအပြည့်အဝပွင့်လင်းစေသည်ထို့နောက်အကူးအပြောင်းနှစ်ခု swaps သော CSS ကို:
.swapMe img {-webkit-အကူးအပြောင်း: အားလုံး 1s ဖြေလျှော့-In-ထွက်; -moz-အကူးအပြောင်း: အားလုံး 1s ဖြေလျှော့-In-ထွက်; -ms-အကူးအပြောင်း: အားလုံး 1s ဖြေလျှော့-In-ထွက်; -O-အကူးအပြောင်း: အားလုံး 1s ဖြေလျှော့-In-ထွက်; အကူးအပြောင်း: အားလုံး 1s ဖြေလျှော့-In-ထွက်; } .swap1, .swapMe: .swap2 {-webkit-opacity ကိုပျံဝဲ: 1; -moz-opacity ကို: 1; opacity ကို: 1; } .swapMe: မောက်စ်တင် .swap1, .swap2 {-webkit-opacity ကို: 0; -moz-opacity ကို: 0; opacity ကို: 0; }