အရင်တုန်းက ရေးခဲ့တဲ့ CSS Sprite အကြောင်းလေးပါ.. အဲဒီတုန်းက Icon များကို တခုစီပြန့်ကျဲအောင် upload လုပ်မယ့်အစား image တစ်ခုတည်းမှာ ပေါင်းပြီး ထည့်သွင်းလိုက်တဲ့ နည်းကို ဖော်ပြခဲ့ပါတယ် .. အခုကတော့ background အတွက်ပါ ..
အခုခေတ်အခါမှာ mobile device တွေမှာပါ webpage ကို ကြည့်လို့ ရနေပြီဖြစ်ပါတယ် .. အဲဒီမှာ webpage loading time ဆိုတာ အရေးပါလာပါတယ်.. page လေးတစ်ခု ကြည့်ရဖို့ အရေး အချိန်တွေအများကြီးပေးနေရရင် မဟုတ်သေးပါဘူး .. ဒီလိုနဲ့ Webpage တစ်ခု Loading မြန်လာဖို့အတွက် WebDesign ပိုင်းမှာ .. အများစု Website တွေဟာ ပုံတွေ ကို တတ်နိုင်သလောက် လျော့ချပြီး မဖြစ်မနေ Site logo လောက်သာ ထည့်သွင်းကြပါတယ် .. နောက်ပြီး background အတွက် background-color ကိုသာ အသုံးပြုကြပါတယ်.. ယခုနောက်ပိုင်းမှာ CSS လည်း ပေါ်လာတဲ့အတွက် အရမ်းကို အဆင်ပြေသွားပါတယ် .. ဥပမာ .. Google ကို မှာ ဘာပုံတွေမှ မသုံးထားတဲ့အတွက် Loading time 25% တက်လာတာကို တွေ့ရပါမယ် ....
ကဲ CSS sprite အေၾကာင္းေလ စလုိက္ရေအာင္ .. CSS sprite ဆုိတာကေတာ့ ၀က္ဆုိဒ္ေတြရဲ့ background-image မွာသံုးတဲ့ပံုေတြ အတြက္ Http requests မ်ားကုိ ေလ်ာ့ခ်ေပးဖုိ႔ရယ္၊ အဲဒီ ပံုေတြရဲ့ ဖုိင္ဆုိဒ္ကုိ ေလ်ာ့ခ်ေပးဖုိ႔ရယ္ အတြက္ သံုးတဲ့ CSS trick တစ္ခုျဖစ္ပါတယ္. အေျခခံအားျဖင့္ သံုးမယ့္ ပံုေသးေသးေလးေတြကုိ ေပါင္းျပီး အၾကီးၾကီး (master image)တစ္ခု လုပ္ပီးသံုးတာလုိ႔ ေျပာလုိ႔ ရပါတယ္ ..(ဒါဆုိရင္ http requests နဲသြားပါမယ္ .. တပံုပဲ ယူစရာ လုိလုိ႔ပါ) ဒါ့အျပင္ background image အျဖစ္ သံုးမယ့္ပံုေတြရဲ့ ဖုိင္ဆုိဒ္ကုိလည္း ေလ်ာ့ခ်ေပးႏုိင္ပါတယ္.. (ဒါကေတာ့ တူတဲ့ ေနရာေတြမွာ CSS property တစ္ခုျဖစ္တယ့္ repeat-x repeat-y ကုိ သံုးမွာ ျဖစ္ပါတယ္)
Background repeat tutorial
အရင္ဆံုး Photoshop CS5 ကို ဖြင့္ပါ.. အဲဒီမွာ background ဖန္တီးပါမယ္ .. ျပီးရင္ အဲဒါကုိ ၀က္ဆုိဒ္မွာ သံုးပါမယ္..
1. File => New and then set Preset: Web and
Size:1152*864
2.From side bar .. in LAYERS
More info => http://css-tricks.com/css-sprites/