Tuesday, January 12, 2010
min that thant
Button icon behaviour
အခုဆက်ပြီးတော့ အဲဒီ button ရဲ့ text ကို icon ဆိုတဲ့ class နဲ့ တွဲပြီး ထည့်ပါမယ်။ ဒီ icon class ကို icon ပုံလေး ပေါင်းထည့်ဖို့ရယ် သူ့ behavior တွေထည့်ဖို့ သုံးပါမယ်။ button background ကိုလိုက်ပြီးတော့ icon ရဲ့ အရောင်ကလည်း (၃)မျိုး ပြောင်းသွားပါမယ်။ icon ကို OK ရဲ့ ဘယ်ဘက်မှာထည့်ပါမယ်။
.icon {
background-repeat: no-repeat;
padding: 0 0 5px 18px;
}
Background image ကိုနောက်မှာ ထပ်ကြေညာပါမယ်။ အခု no-repeat ဆိုတာလေးပဲကြေညာထားမယ်။ padding ကို အပေါ်နဲ့ညာဘက် ကို ‘0’ ထားပါမယ်။ အောက်ကို ‘5’ ထားပါမယ်။ ဘယ်ဘက်ကို ‘18’ ထားပါမယ်။ ‘18’ ကိုတော့ icon အတွက်နေရာချန်ထားတာဖြစ်ပါတယ်။ icon က (16*84) ရှိပါတယ်။background-repeat: no-repeat;
padding: 0 0 5px 18px;
}
a.button:hover .icon, a.button:active .icon {
background-position: 0 -28px;
}
a.buttonDis:link .icon, a.buttonDis:visited .icon, a.buttonDis:hover .icon, a.buttonDis:active .icon {
background-position: 0 -56px;
}
Rollover effect ဟာ same background image positioning technique ကို button ရဲ့ background ပြောင်းဖို့သုံးသွားတာဖြစ်ပါတယ်.။ (icon လေးဟာ a:hover a:active အဆင့်တွေမှာ 28 pixel position ပြောင်းသွားပြီး orange icon ဖြစ်သွားပါမယ်။ disabled button ရဲ့ icon ကတော့ 56 pixel position မှာရှိတဲ့ background ကိုပဲ သုံးပါမယ်။background-position: 0 -28px;
}
a.buttonDis:link .icon, a.buttonDis:visited .icon, a.buttonDis:hover .icon, a.buttonDis:active .icon {
background-position: 0 -56px;
}
**********************************************************
An icon for each button
ပြီးခဲ့တဲ့ အဆင့်တွေမှာ button ရဲ့ state တွေကိုလိုက်ပြီးတော့ နေရာပြောင်းသွားတာကို ကြေညာခဲ့ပါတယ်။ အခုဒီမှာတော့ button တွေမှာ အသုံးပြုမယ့် icon file တွေကို ကြေညာပါမယ်။ သုုံးမျိုးရှိပါတယ်။ OK button,Cancel button and import button အတွက်ပါ။
#buttonOK .icon {
background-image: url(ok.gif);
}
#buttonCancel .icon {
background-image: url(cancel.gif);
}
#buttonImport .icon {
background-image: url(import.gif);
}
Tutorial file ကို ဒီ မှာ ဒေါင်းပါ။background-image: url(ok.gif);
}
#buttonCancel .icon {
background-image: url(cancel.gif);
}
#buttonImport .icon {
background-image: url(import.gif);
}
MORE INFO => http://sophie-g.net/jobs/css/e_buttons.htm
Posted in 
No Response to "Rollover buttons & icons with CSS(3)"
Post a Comment