Tuesday, January 05, 2010
min that thant
အရင်ကတည်းက အဲဒီပုံလေးတွေ မြင်ကတည်းက စိတ်ဝင်စားနေတာပါ။ ကျွန်တော်ဟာ အရင်ကတည်းက Website တွေရဲ့ Page Info ကို၀င် ၀င်ကြည့်ရတာ အရမ်းစိတ်ဝင်စား ပါတယ်။ ဒီဆိုဒ်ကို ဘာတွေနဲ့ လုပ်ထားသလဲပေါ့။ အဲဒီမှာ ဒီလိုပုံလေးတွေ တွေ့တာပဲ ။ ၀က်ဆိုဒ်မှာ ဒီလိုပုံတွေဟာ ဒီအတိုင်း အကြီးကြီး မဟုတ်ပါဘူး။ icon လေးတွေ အနေနဲ့ပဲ တွေ့ရပါတယ်။ ဒါနဲ့ အဲဒီပုံလေးရဲ့ name ကိုမှတ်ပြီး အဲဒီဆိုဒ် ရဲ့ CSS file ကိုစပ်စုလိုက်ပါတယ်..အဲဒီမှာ သုံတဲ့နေရာ အမျိုးအစား မတူပေမယ့် ပုံနာမည်ကတော့ ဒီပုံပဲ ဖြစ်နေတာ တွေ့ရပါမယ်။ ဘယ်မှာကွာသွားသလဲ ဆိုတော့ height,width နဲ့ background-position မှာကွာသွားပါတယ်။.spritePlayVideoButton
{
text-indent: -2000em;
display: block;
border: 0px;
width: 120px;
height: 24px;
background-color: #ffffff;
background-image: url(http://static.howstuffworks.com/en-us/default/layout/hsw_article_sprite_2.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
.spriteGoButton
{
display: block;
width: 30px;
height: 19px;
background-image: url(http://static.howstuffworks.com/en-us/default/layout/hsw_article_sprite_2.gif);
background-repeat: no-repeat;
background-position: 0px -24px;
}
.spriteFacebookIcon
{
width: 13px;
height: 13px;
background-image: url(http://static.howstuffworks.com/en-us/default/layout/hsw_article_sprite_2.gif);
background-repeat: no-repeat;
background-position: 0px -253px;
border: 0px;
}
ဒီမှာ CSS style sheet ရဲ့ position ကိုသုံးသွားတာပါပဲ။ ပုံမှာကြည့်ပါ background image ကို လိုအပ်တဲ့နေရာလောက် အပေါ်ဘယ်ထောင့်ကနေပြီး လိုအပ်သလောက်လေးပဲ height နဲ့ width ကို ယူသွားတာပါပဲ။ တကယ်နေရာမှာ background-position(x y) ကနေပြီး height နဲ့ width ကိုတွက်ပြီး background ပေါ်မှာပါ။ ဥပမာ. Go button အတွက်ဆိုပါတော့။ မူလ position ကို 0 နဲ့ -24 (အောက်) ပေးထားပါတယ်။ အဲဒီအမှတ်ကနေပြီး height နဲ့ width ရှိသလောက်လေးပဲ ပေါ်မှာပါ။ ဒါဆိုရင် ပုံသေးသေးလေးတွေအတွက် CSS မှာ ရှင်းရှင်းလင်းလင်း ရေးလို့ရသွားပါပြီ။
Posted in 
No Response to "CSS Icon Background Image Sprites"
Post a Comment