CSS3 ထွက်ပေါ်လာပြီးတဲ့နောက်မှာ ကျွန်တော်တို့တစ်တွေ Flash တွေလောက်နီးနီး CSS code တွေအသုံးပြုပြီးတော့ Animation တွေ Effect တွေ အသုံးပြုလို့ရလာပါပြီ။ Flash ရဖို့အတွက် Adobe Flash Player Plugins Install လုပ်ထားဖို့လိုပေမယ့် CSS3 အတွက်ကျတော့ ကျွန်တော်တို့အတွက် Modern Web Browser တစ်ခုပဲလိုအပ်ပါတယ်။ Browser တွေနဲ့ပတ်သတ်ပြီးတော့ နောက် အခွင့်သင့်ရင်ပြောပြပါအုံးမယ်! ဒီတစ်ခေါက် ကျူတိုရီယယ်မှာတော့ အဓိကထား ပြောချင်တာက coding တွေအသားပေးမပြောတော့ပဲ CSS နဲ့ HTML တွေရဲ့ လှပတဲ့ နည်းပညာတွေကို လေ့လာကြည့်ရအောင်။

ထုံးစံအတိုင်း Basic HTML တစ်ခုရေးမယ်။ ပြီးရင်တော့ ထုံးစံအတိုင်း div လေးတစ်ခုနဲ့ စလိုက်ရအောင်!

<div>
<img src="image.gif" />
<div>
<h2>Title</h2>
<p>Your Text</p>
<a href="#">Read More</a>
</div>
</div>

CSS3 ကိုအဓိကထား ပြောပြမှာမို့လို့ html က ဒီလောက်ဆိုရင်ရပါပြီ။ စပြီးတော့ css တွေ ရေးပါမယ်။

.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}

အသေးစိတ် တစ်ခုချင်းစီကိုတော့ ရှင်းပြမနေတော့ပါဘူး။ ဒါဆိုရင်တော့ အဓိက လိုအပ်တဲ့ CSS တွေပြီးပါပြီ။ ဆက်လိုတာကတော့ ဘယ်လို CSS3 နဲ့ Flash တွေလို Animate Effect တွေ ပြုလုပ်မလဲဆိုတာပါပဲ။

အရင်ဆုံး ကျွန်တော်တို့ရေးထားတဲ့ div မှာ class နောက်တစ်ခု အသစ်ထည့်လိုက်ပါ။

<div class="view view-first">
<!-- ... -->
</div>

ပြီးရင်တော့ ဘာမှမလိုပါဘူး။ CSS ပဲဆက်ရေးကြတာပေါ့။

.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}

Transition, Transform တွေအားလုံးကို transition, transform တစ်ခုထဲနဲ့ ကိုယ်စားပြုပြီး ရေးသားထားပါတယ်။ ဒါပေမယ့် Browser တိုင်းမှာ အလုပ်လုပ်ဖို့အတွက်ဆိုရင်တော့ -webkit-transform, -moz-transform, -webkit-transition, -moz-transition တွေနဲ့ ရေးပေးဖို့ လိုပါလိမ့်မယ်။ value တွေကတော့ ကိုယ်နှစ်သက်သလို ပြင်ဆင်ပေါ့! ကိုယ်အသုံးပြုတဲ့ ဆက်ရေးရအောင်!

.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}

ပြီးပြီလို့ပြောလို့ရပါတယ်။ ပုံအပေါ် Hovor လုပ်ပြီးတော့ ဘာပြောင်းသွားလဲဆိုတာကို ကြည့်ကြည့်ပါ။

အဓိက ဒီ Tutorial မှာ ပြောချင်တာက ကျွန်တော်တို့တွေအနေနဲ့ Code တွေကို အသေမှတ်ထားစရာမလိုပါဘူး။ အဓိက ဘယ်လိုနေရာမှာ ဘယ်လိုဖြစ်ချင် ဘယ်လို Code ကိုသုံးရတယ်ဆိုတာ မှတ်ထားဖို့ပါပဲ။ transform ကိုဘာကြောင့်သုံးတယ်။ ဘယ်လိုနေရာမှာသုံးတယ်။ အဲ့ဒါတွေအပြင် ကိုယ်အသုံးပြုမယ့် html, CMS တွေမှာလည်း ဘယ်လို အသုံးချ နိုင်မလဲဆိုတာတွေ လောက်ပါပဲ။ Code တွေကို ကျွန်တော်တို့က မွေးဖွားရတာပါ၊ ကျွန်တော်တို့က Code တွေအတိုင်း လိုက်လုပ်နေစရာမလိုပါဘူး!

Download the Source File or View Demo

Credit : Alessio Atzeni

2 Responses

1. zinyaw says:

   February 8, 2012 at 3:34 PM

   လာရောက် အားပေးသွားပါတယ်.. အခုလိုမျိုး ပညာဒါနတွေ များများ ဖြန့်ဝေနိုင်ပါစေ ခင်ဗျာ..
   ဒီပိုစ့်အတွက် ကျေးဇူးပါ…အစစအရာရာ အဆင်ပြေ အောင်မြင်ပါစေဗျာ..

   Reply
   • K says:

     February 8, 2012 at 7:52 PM

     Thanks for your feedback, hope you’re ok with above tutorial.

     Reply