ဒီတခါတော့ ဆားချက်တယ် ပဲဆိုဆို ၊  လွယ်လွယ်ကူကူ ရှမ်းအလံကို CSS3 ကိုအသုံးပြုပြီးတည်ဆောက်သွားမှာပါ။ လွယ်ကူတဲ့အတွက် html ,css အခြေခံရှိသူတိုင်းလိုလို ပြုလုပ်နိုင်ပါတယ်။ အဲဒါကို အခြေခံပြီး တခြားသော အလံများ ၊ ပစ္စည်းများ တည်ဆောက်ကြည့်မယ်ဆိုရင် ပိုပြီးတော့ တက်မြောက်လာမှာပါ။ ဒီ tutorial က ကိုအိမောင် CSS3 ကိုအသုံးပြုပြီး မြန်မာနိုင်ငံ အလံကို ပြုလုပ်တဲ့ tutorial ကနေ  စိတ်ကူးပေါက်ပြီး လုပ်မိလိုက်တာပါ။

ပထမဆုံး အပိုင်းသုံးပိုင်းပိုင်းပါခင်ဗျာ။

<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>

ပြီးရင်တော့ အဝိုင်းအတွက်တစ်ခု အပေါ်က ချုပ်မယ့် wrapper အတွက်တစ်ခုလိုပါတယ်။ ဒီတော့ စုစုပေါင်းငါးခုပါ။

<div id=”wrapper”>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>
<div id=”circle”></div>
</div>

ပြီးရင်တော့ CSS မှာပဲပြင်ရမှာပါ။ box သုံးခုအတွက် width ရယ် height ရယ် color ရယ်ပါ။

#box1{
background:#FECB00;
width:400px;
height:100px;
}

#box2{
width:400px;
height:100px;
background:#34B233;
}

#box3{
background:#EA2839;
width:400px;
height:100px;
}

ပြီးရင် circle ကို position absolute နဲ့ရွေ့ပါ။

#circle{
background:white;
width:200px;
height:200px;
border-radius:200px;
position:absolute;
bottom:50px;
left:100px;
}

ပြီးရင်တော့ wrapper တစ်ခုခုနဲ့ချုပ်လိုက်ပါ။ position absolute ဆိုတော့ Zoom ပြောင်းရင်ပြေးထွက်သွားမှာစိုးလို့ပါ။

#wrapper{
width:960px;
margin:0 auto;
position:relative;
}

ဒါဆိုရင်တော့ ရသွားပြီလိုထင်ပါတယ်။ Inspiration ဖြစ်မိတဲ့အတွက်လည်း ကိုအိမောင်ကိုအထူးပဲကျေးဇူးတင်ပါတယ်။ နောက်ဆုံးပြီးသွားတဲ့ ရလဒ်ကို ဒီမှာကြည့်နိုင်ပါတယ်။

Leave a comment

Name (required) Email (required) Website Comment (required)

CAPTCHA Code *