ယခု Tutorial မှာ html &cssကိုအသုံးပြုပြီး Image တစ်ခုတည်ဆောက်ပုံကိုဖော်ပြပေးမှာ ဖြစ်ပါတယ်။မထင်မှတ်ပဲပေါ်လာတဲ့ အကြံလေးတစ်ခုကနေဒီနည်းကိုရခဲ့တာပါ။ လုပ်ရတာလွယ်ပေမယ့် နည်းနည်းတော့ လက်ဝင်ပါတယ်။
Demo Link: http://ygn.me/KfNS
ဒီအသည်းပုံလေး ဖြစ်ဖို့အတွက် HTML Element တွေနဲ့ CSS ကိုပဲသီးသန့် အသုံးပြုပြီးရေးဆွဲထားပါတယ်။ လေးထောင့်ကွက်ပေါင်း ၁၃၀ [ အလျား ၁၃ x အနံ ၁၀ ] နဲ့ ရေးဆွဲထားတာ ဖြစ်ပါတယ်။ အခုဒီအသည်းပုံရေးဆွဲထားပုံကိုအရင် ရှင်းပြခြင်ပါတယ်။
အထက်ကပုံမှာဖော်ပြထားတဲ့ အတိုင်း Photoshop သို့မဟုတ် ကြိုက်နှစ်သက်ရာ Image Editor တစ်ခုပေါ်မှာလိုချင်တဲ့ ပုံစံရအောင် အရင် ရေးသားကြည့်ပါမယ်။ အထက်ကပုံမှာအလျား ၁၃ ကွက်အတွက် စတင်ရေးဆွဲရာမှာ blank | blank | blank | white | blank | blank | blank | blank | blank | white | blank | blank လို့ ရေးဆွဲပါတယ်။ ဒီလိုပုံဆံမျိုးနဲ့ပဲကျန်တဲ့ ၉ လိုင်းကိုလဲ ဖြည့်သွင်းပါတယ်။ ဒီအသည်းပုံရဖို့အတွက် အသုံးပြုထားတဲ့ html တွေကိုဖော်ပြထားပါတယ်။

<div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div id="white"></div>
<div id="blank"></div><div id="blank"></div><div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div id="white"></div>
<div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div style="clear:both;"></div>
<!-- End Top Line -->
<div id="blank"></div><div id="blank"></div>
<div id="white"></div><div id="red"></div><div id="white"></div><div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div id="white"></div><div id="red"></div><div id="white"></div><div id="blank"></div><div id="blank"></div>
<div style="clear:both;"></div>
<!-- End Second Line -->
<div id="blank"></div><div id="white"></div>
<div id="red"></div><div id="red"></div><div id="red"></div><div id="white"></div><div id="blank"></div><div id="white"></div>
<div id="red"></div><div id="red"></div><div id="red"></div><div id="white"></div><div id="blank"></div>
<div style="clear:both;"></div>
<!-- End Third Line -->
<div id="white"></div><div id="red"></div>
<div id="red"></div><div id="red"></div><div id="red"></div><div id="red"></div><div id="white"></div><div id="red"></div>
<div id="red"></div><div id="red"></div><div id="red"></div><div id="red"></div><div id="white"></div>
<div style="clear:both;"></div>
<!-- End Fourth Line -->
<div id="blank"></div><div id="white"></div>
<div id="red"></div><div id="red"></div><div id="red"></div><div id="red"></div><div id="red"></div><div id="red"></div>
<div id="red"></div><div id="red"></div><div id="red"></div><div id="white"></div><div id="blank"></div>
<div style="clear:both;"></div>
<!-- End Fifth Line -->
<div id="blank"></div><div id="blank"></div>
<div id="white"></div><div id="red"></div><div id="red"></div><div id="red"></div><div id="red"></div><div id="red"></div>
<div id="red"></div><div id="red"></div><div id="white"></div><div id="blank"></div><div id="blank"></div>
<div style="clear:both;"></div>
<!-- End Six Line -->
<div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div id="white"></div>
<div id="red"></div><div id="red"></div><div id="red"></div><div id="red"></div><div id="red"></div>
<div id="white"></div>
<div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div style="clear:both;"></div>
<!-- End Seven Line -->
<div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div id="blank"></div>
<div id="white"></div><div id="red"></div><div id="red"></div><div id="red"></div><div id="white"></div>
<div id="blank"></div>
<div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div style="clear:both;"></div>
<!-- End Eight Line -->
<div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div id="blank"></div>
<div id="blank"></div><div id="white"></div><div id="red"></div><div id="white"></div><div id="blank"></div>
<div id="blank"></div>
<div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div style="clear:both;"></div>
<!-- End Nine Line -->
<div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div id="blank"></div>
<div id="blank"></div><div id="blank"></div><div id="white"></div><div id="blank"></div><div id="blank"></div>
<div id="blank"></div>
<div id="blank"></div><div id="blank"></div><div id="blank"></div>
<div style="clear:both;"></div>
<!-- End Ten Line -->

အထက်မှာဖော်ပြခဲ့တဲ့ html code တွေအားလုံးအတွက် cssကိုတော့ ဒီလိုမျိုးရေးသားထားပါတယ်။

body {
background: #005684;
width: 450px;
margin: 0 auto;
margin-top: 30px;
font-size:8pt;
text-align:center;
}

#white, #red  {
	cursor: pointer;
	border:1px solid #fff;
}

#white {
	background:#fff;
	width:30px;
	height:30px;
	float: left;
}

#white:hover {
	background:#cfcfcf;
}

#red {
	background: #ff0000;
	width:30px;
	height:30px;
	float: left;
}

#red:hover {
	background: #c70000;
}

#blank {
	width:32px;
	height:32px;
	float: left;
}

ဒီ Tutorial ဟာအခြေခံနားလည်ဖို့ ဖြစ်ပါတယ်။ http://ygn.me/TddzbN မှာ ကျွန်တော်ရေးဆွဲထားတဲ့ ပုံလေးတစ်ပုံထပ်ဖော်ပြလိုက်ပါတယ်။ ဒီနည်းကိုအသုံးပြုပြီး html &cssကိုအသုံးပြုပြီးအနုပညာမြောက်တဲ့ ပန်းချီကားတွေ ရေးဆွဲ နိုင်မယ်လို့ မျှော်လင့်ပါတယ်။

One Response

1. poohspear says:

   December 6, 2011 at 3:09 PM

   Wow!
   That is nice article and it also great however I think if you use “.class” selector instant of “#id” it will be more nice and more great coz; according to selector theory we must used “#id” only a one time in a html document.

   What ever I am really impress your idea to creating pixel art using HTML and CSS.

   Reply