ဒီတခေါက် tutorial ကတော့ css3 ကိုသုံးပြီး tooltips တစ်ခုလောက် ရေးကြည့် ကြရအောင်ပါ။ သူက jQuery ကိုသုံးတာထက် ပို လွယ်မယ် ထင်ပါတယ်။ ပထမဆုံး img ပုံလေးရှိမယ်။ hover တင်လိုက်ရင် သူနဲ့ သက်ဆိုင်တဲ့ tooltips box လေးတက်လာမှာပါ။  ကဲ tooltips လေးပေါ်လာအောင် CSS transition ကိုသုံးပြီး စမ်းကြည့် ရအောင်ပါ။ ထုံးစံအတိုင်း html structure လေးကို အရင်ရေးလိုက်ပါ။ ပြီးရင် နဂို ပေါ်မဲ့ ပုံအတွက် image တခုပါပါမယ် ပြီးရင် tootltip အနေနဲ့ တက်လာမဲ့ စာသားအတွက် span tag တခုရှိပါမယ်။ သူတို့ကို ul li နဲ့ရေးထားပါတယ်။ div ၂ ခုပါပါတယ်။ တခုက demo version တွေအတွက် ပါ။

HTML

 

<div id="container">
<h1>Tooltips with CSS</h1>
<ul>
<li>
<a href="#">
<span>Wordpress</span>
<img src="images/wordpress.png" alt="" />
</a>
</li>
<li>
<a href="#">
<span>CodeIgniter</span>
<img src="images/ci.png" alt="" />
</a>
</li>
<li>
<a href="#">
<span>PHP</span>
<img src="images/php.png" alt="" />
</a>
</li>
<li>
<a href="#">
<span>HTML</span>
<img src="images/html5.png" alt="" />
</a>
</li>
<li>
<a href="#">
<span>jQuery</span>
<img src="images/jquery.png" alt="" />
</a>
</li>
</ul>
</div><!--end container-->
<div id="demos">
<a href="index.html">Demo 1</a>
<a href="index1.html">Demo 2</a>
<a href="index2.html">Demo 3</a>
<a href="index3.html">Demo 4</a>
</div><!--end demos-->

html အပိုင်းကတော့ ဒီနေရာမှာပြီးပါပြီ။ css တွေနဲ့ ထပ် ကွန့် ကြတာပေါ့။ အရင်ဆုံး နဂိုပေါ်နေမဲ့ပုံ အတွက် css ကို အရင်ရေးကြရအောင်ပါ။

CSS

 #container{
 width: 960px;
 margin: 0 auto 50px;
 }
 #container h1{
 font-size: 21px;
 text-align: center;
 margin: 30px 0 100px 0;
 }
 #container ul{
 width: 750px;
 margin: 0 auto;
 }
 #container ul li{
 display:inline-block;
 width: 100px;
 height: 100px;
 margin: 20px;
 position: relative;
 }
 #container ul li a img{
 border: 1px solid #c3c3c3;
 padding: 5px;
 }

ကဲ hover တင်ရင် ပေါ်လာမဲ့ tooltips box အတွက် ဆက်ရေးကြရအောင်ပါ။

#container ul li a span{
 width: 100px;
 height: auto;
 line-height: 20px;
 padding: 10px;
 left: 50%;
 margin-left: -64px;
 font-weight: 400;
 font-style: italic;
 font-size: 14px;
 color: #719DAB;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 text-align: center;
 border: 4px solid #fff;
 background: rgba(255,255,255,0.3);
 text-indent: 0px;
 border-radius: 5px;
 position: absolute;
 pointer-events: none;
 bottom: 120px;
 opacity: 0;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 }
 #container ul li a:hover span{
 opacity: 0.9;
 }

ကဲ နောက်ထပ် demos version တွေအတွက် ထပ်ရေးကြရအောင်ပါ။

#demos{
width: 400px;
height: 50px;
margin: 0 auto;
}
#demos a{
padding: 10px;
text-align: center;
}

ကဲ အခုဆိုရင် ကိုယ့်ရဲ့ html file လေးကို browser ကနေခေါ်ယူ စမ်းကြည့်နိင်ပါပြီ။ source code ကိုတော့ ဒီနေရာမှာ သွားရောက် download ချနိုင်ပါတယ်။ Demo View ကိုတော့ ဒီနေရာကို နှိပ်ပြီးသွားကြည့်နိုင်ပါတယ်။ ဒီ tutorial လေးကို codrops က tutorial လေးကို စမ်းကြည့်ရင်းနဲပြန်လည် ဝေမျှထားခြင်း
ဖြစ်ပါတယ်။

Leave a comment

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

CAPTCHA Code *