Tuesday, January 05, 2010
min that thant
ဒီ tutorial ကတော့ CSS နဲ့ Button လေးတစ်ခုကိုလုပ်တာပါပဲ။ button မှာ background image, icon and label ဆိုပြီးပါပါမယ်။ နောက်ပြီး သူ့ရဲ့ flexibility နဲ့ save bandwidth အတွက် button အတွက် background-image ကိုတစ်ခုပဲသုံးပါမယ်။ icon အတွက်လည်း background-image တစ်ခုပဲသုံးပါမယ်။ အရင်က ပို့စ် ရဲ့ နောက်ဆက်တွဲပေါ့။
mouse မတင်မီ
mouse တင်လိုက်သောအခါ
http://sophie-g.net/jobs/css/buttonsTest.htmမှာ ရှင်းရှင်းလင်းလင်း ကြည့်နိုင်ပါတယ်။
Button shape
button တစ်ခုကို ဖန်တီးဖို့အတွက် < a href > html tag ကိုအသုံးပြုပါမယ်။
< a href="javascript:return false;" class="button" id="buttonOK" > < span class="icon"> Ok < /span > < /a >
ဒီမှာ javascript:return false; နေရာမှာ link ဒါမှမဟုတ် javascript function တစ်ခုခုကို ထည့်သွင်းနိုင် ပါတယ်။ button ရဲ့ ID ကိုတော့ buttonOK လို့ပေးထားပါတယ်။ < span > ကိုတော့ အမှန်ခြစ် icon လေးထည့်ဖို့ အသုံးပြုပါမယ်။ ဒီကုတ်တွေအားလုံးကို html ရဲဲ့ CSS file နဲ့ သာအလုပ်လုပ်သွားမှာ ဖြစ်ပါတယ်။ ဘာ flash button မှ မသုံးပါဘူး။
a.button, a.buttonDis {
display: block;
background-color: transparent;
background-image: url(buttonBackground.gif);
background-repeat: no-repeat;
width: 132px;
height: 28px;
margin: 5px auto;
padding: 5px 0 0 0;
text-align: center;
font-family: Helvetica, Calibri, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
အဲဒီမှာ ဖော်ပြထားတဲ့ link ကတော့ background image (132*28 pixels) ရှိတဲ့ ဘေးနားက ပုံလေးကို ညွှန်းတာပါ။ ဒီ image လေးမှာ အသင့်ပြုလုပ်ထားတဲ့ button ပုံစံလေး ၃ ခုပါ ပါတယ်။ for button states: normal, hover, disabled တို့ဖြစ်ပါတယ်။ ဒီမှာ margin setting က button လေးရဲ့ ပတ်လည် space ကိုပြောပါတယ်။ padding ကတော့ button အတွင်းက icon နဲ့ OK စာသားကို ချိန်ပေးပါတယ်။
Posted in 
No Response to "Rollover buttons & icons with CSS(1)"
Post a Comment