CSS Icon Background Image Sprites

အရင္ကတည္းက အဲဒီပံုေလးေတြ ျမင္ကတည္းက စိတ္၀င္စားေနတာပါ။ ကၽြန္ေတာ္ဟာ အရင္ကတည္းက 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 မွာ ရွင္းရွင္းလင္းလင္း ေရးလုိ႔ရသြားပါျပီ။