Skip to main content

sawsan Mouse Hover

·

Mouse Hover ဆိုတာ သိပ်အထူးအဆန်းကြီးတော့ မဟုတ်တော့ပါဘူး၊ တော်တော်များများမြင်ဖူးပီးသား၊ ရင်းနှီးပီးသား mouse effect တစ်ခုပါ။ အခုလည်း ကျနော်က ကျနော်မြင်တွေ့ဖူးထားတာလေးတွေရယ်၊ ကိုယ့်စိတ်ကူးနဲ့ကိုယ်တွေးပီးရေးထားတဲ့ mouse hover code လေးတွေအကြောင်းပြောပြချင်ပါတယ်။


ပထမဆုံး ..


Text shadow mouse hover


ဒါက mouse ထောက်လိုက်တဲ့အချိန်မှာ text shadow ပေါ်လာတဲ့ပုံစံပါ။ဒီလိုပုံစံလေးပါ။ အောက်က code လေးကို run ကြည့်လိုက်ပါ။




<html>


<head>


<style>


h2 a {color:#000; }


h2 a:hover {text-shadow:#1f01fd 2px 2px 2px;}


</style>


</head>


<body>


<h2><a href="http:// something link " target="_blank">This is Title </a></h2>

</body>


</html>


အခုပေးတဲ့ code တွေကို notepad ထဲမှာ ထည့်ပြီး filename.html ဆိုပြီး html format နဲ့ save ပြီး run ကြည့်ပါ။ text shadow အတွက် text-shadow:#အရောင် x, y, bluer ဆိုပြီးသုံးပေးရတာပါ။


Simple border mouse hover


ဒါကတော့ mouse ထောက်လိုက်တဲ့အချိန်မှာ ရိုးရှင်းတဲ့ boder frame လေးတစ်ခုပေါ်တာတဲ့ပုံစံပါ။



ဒီလိုပုံစံလေးပါ။ အောက်က code လေးကို run ကြည့်လိုက်ပါ။





<html>



<head>



<style>



h2 a {color:#000; }



h2 a:hover {background:#f7f7f7;-moz-border-radius:5px;border:1px solid #ccc;}



</style>



</head>



<body>



<h2><a href="http:// something link " target="_blank">This is Title </a></h2>



</body>



</html>





border အတွက် backgroud ကာလာ ; border ထောင့်အကွေး ; border line အထူ နဲ့ ကာလာဆိုပြီး ရေးပေးရပါတယ်။


RGBA background mouse hover


ဒါကတော့ mouse ထောက်လိုက်တဲ့အချိန်မှာ နောက်ခံ background ကိုဖောက်မြင်ရတဲ့ ကာလာအကြည်ရောင်လေးနဲ့ border frame လေးတစ်ခုပေါ်လာတဲ့


ပုံစံပါ။



ဒီလိုပုံစံလေးပါ။ အောက်က code လေးကို run ကြည့်လိုက်ပါ။


<html>


<head>


<style>


body {


background:#0f6b24 url('http://api.ning.com:80/files/cjFv001yqcsPSp5A1aR2Y-


UmfaDizcesMUJHHTvxHNGYppPOCyoAAQIiMASHBQuJoA2I5OA0h47HI2Vx2en75cONRDw4vfiX/lemon_tea.jpg');


}


h2 a {color:#fff; text-decoration:none}


h2 a:hover {background:rgba(252,252,252,0.5); -moz-border-radius:5px; border:1px solid #dae3fc;


color:#fff;}


</style>


</head>


<body>


<h2><a href="http://sawsan23.com " target="_blank">This is Title </a></h2>


</body>


</html>


ဒါမျိုးပုံစံလေးတွေက header navigation bar တွေနဲ့ widget နောက်ခံအရောင်တွေအတွက်သုံးလို့ကောင်းပါတယ်၊ ဟိုတုန်းကဆို photoshop ထဲမှာ opacity ကိုလျော့ချပြီးနောက်ခံပုံပေါ်စေတဲ့ အကြည်ရောင်လေးရဖို့လုပ်ပြီး host တင်ပီး code ကိုသုံးရပါတယ်။ အခုတော့ rgba သုံးလိုက်တာနဲ့တင် ရပါပီ။ rgba ဆိုတာ red,green,blue,alpha ကိုပြောတာပါ။ apha ဆိုတာ opacity နဲ့အတူတူပါပဲ။


mouser hover text decoration


ဒါကတော့ mouse ထောက်လိုက်တဲ့ text မှာ underline နဲ့ပေါ်စေဖို့ပါ။


link သက်မှတ်ထားတဲ့ text မှာ html က auto underline ပေါ်နေတာပါ။


အဲ့ဒီ underline ကိုဖျောက်ထားပီး။ mouse ထောက်လိုက်တဲ့အခါမှ underline ကိုပေါ်လာစေတာမျိုးပါ။


ရှင်းသွားအောင် အောက်က code လေးကို run ကြည့်လိုက်ပါ။


<html>


<head>


<style>


h2 a {text-decoration:none }


h2 a:hover {text-decoration:underline}


</style>


</head>


<body>


<h2><a href="http://sawsan23.com " target="_blank">This is Title </a></h2>


</body>


</html>


link သက်မှတ်ထားတဲ့ အတွက် html က auto သက်မှတ်ပေးတဲ့ underline ကို none လို့ ရေးပြီးဖျောက်ထားလိုက်ပါတယ်။ mouse hover အတွက် text-decoration မှာ underline ဆိုပြီးပြန်ရေးပေးရတာပါ။


mouse hover dotted style


ဒါကတော့ အသုံးနည်းပါလိမ့်၊ mouse ထောက်လိုက်တဲ့အခါမှာ dotted line နဲ့ border frame လေးတစ်ခုပေါ်လာတဲ့ ပုံစံပါ။


ဒီလိုပုံစံလေးပါ။ အောက်က code လေးကို run ကြည့်လိုက်ပါ။


<html>


<head>


<style>


h2 a {color:#000; text-decoration:none}


h2 a:hover {-moz-border-radius:10px; border-style:dotted ;}


</style>


</head>


<body>


<h2><a href="http://sawsan23.com " target="_blank">This is Title </a></h2>


</body>


</html>


ဒီပုံစံမျိုးက သိပ်တော့ မတွေ့ရပါဘူး၊ လှလည်း မလှပါဘူး။ သိထားရုံပါ။


Border bottom mouse hover


ဒါကတော့ mouse ထောက်လိုက်တဲ့အခါမှာ border frame တစ်ခုပေါ်လာပီး၊ frame border ကို bottom မှာပဲပေါ်စေတဲ့ ပုံစံပါ။


ဒီလိုပုံစံလေးပါ။ အောက်က code လေးကို run ကြည့်လိုက်ပါ။


<html>


<head>


<style>


h2 a {color:#000; text-decoration:none}


h2 a:hover {background:#f7f7f7; -moz-border-radius:9px; border-bottom:1px solid #222; }


</style>


</head>


<body>


<h2><a href="http://sawsan23.com " target="_blank">This is Title </a></h2>


</body>


</html>


ရိုးရိုး border frame တစ်ခုလိုပါပဲ background ကာလာ , border ထောင့်အကွေး, border-bottom: ဆိုပြီးထည့်ရေးပေးလိုက်ရတာပါ။


<html>


<head>


<style>


h2 a {font-size:23px;}


h2 a:hover {font-size:27px;}


</style>


</head>


<body>


<h2><a href="http:// something link " target="_blank">This is Title </a></h2>


</body>


</html>


ဒီ code ကတော့ ကြည့်လိုက်တာနဲ့တင် သိမယ်ထင်ပါတယ်။ mouser ထောက်လိုက်တဲ့အချိန်မှာ မူလ font size ထက် ကြီးပိုကြီးပြီးပေါ်တာတဲ့ပုံစံပါ။ ရှင်းသွားအောင် code ကို run ကြည့်လိုက်ပါ။


ဒါနဲ့ဆန့်ကြင်ဘက်ဖြစ်တဲ့ mouse ထောက်လိုက်တဲ့အခါမှာ မူလ font size ထက် ငယ်သွားတာမျိုးအတွက်ဆိုရင် ..


<html>


<head>


<style>


h2 a { font-size:27px;}


h2 a:hover {font-size:23px;}


</style>


</head>


<body>


<h2><a href="http:// something link " target="_blank">This is Title </a></h2>


</body>


</html>


ဒီလိုပြောင်းရေးရပါတယ်၊ ရှင်းသွားအောင် code ကို run ကြည့်လိုက်ပါ။


Opacity mouse hover


ဒါကတော့ opacity ကိုသုံးပြီး mouse ထောက်လိုက်တဲ့အခါမှာ link (or) image ကိုပျောက်သွားတဲ့ပုံစံပါ။


code လေးကို run ကြည့်လိုက်ပါ။


<html>


<head>


<style>


h2 a { background:#eee; -moz-border-radius:5px; border:1px solid #ccc; padding:1px 2px}


h2 a:hover { background:#eee; opacity:0; -moz-border-radius:5px; border:1px solid #ccc; padding:1px 2px}


</style>


</head>


<body>


<h2><a href="http:// something link " target="_blank">This is Title </a></h2>


</body>


</html>


opacity မှာ 0 ဆို၇င် text link (or) image က ပျောက်သွားတဲ့ပုံစံဖြစ်ပြီး 1 ဆိုရင်တော့ မူလအတိုင်းပေါ်နေမှာပါ။


အဲ့ဒီ opacity ကိုသုံးပြီးတော့ပဲ နောက်တစ်ခုရေးကြည့်အောင်.. ပထမ text link (or) ပုံလေးကို အမှိန်လုပ်ထားမယ်။


mouse ထောက်လိုက်တဲ့အခါမှ လင်းလာတဲ့ပုံစံ ..


ဒီလို ပြောင်းရေးရပါတယ်။


<html>


<head>


<style>


h2 a { background:#eee; opacity:0.5; -moz-border-radius:5px; border:1px solid #ccc; padding:1px 2px}


h2 a:hover { background:#eee; opacity:1; -moz-border-radius:5px; border:1px solid #ccc; padding:1px 2px}


</style>


</head>


<body>


<h2><a href="http:// some thing link " target="_blank">This is Title </a></h2>


</body>


</html>


ပထမ background မှာ ကာလာ ဒါမှမဟုတ် image တစ်ခုသုံးထားပြီး opacity ကို 0.5 လောက်လျော့ချထားပြီး။


mouse ထောက်လိုက်တဲ့အချိန်မှာ ပေါ်လာမယ့် hover မှာ opacity ကို 1 ဆိုပြီး လင်းပေးလိုက်တာပါ။ code ကို run ကြည့်လိုက်ရင် ရှင်းမှာပါ။


mouse hover padding


ဒါကတော့ mouse ထောက်လိုက်တဲ့အခါမှာ text link (or)image က ဘေးကိုရွှေ့သွားတဲ့ပုံစံမျိုးပါ။


အောက်က code ကို run ကြည့်လိုက်ရင် ရှင်းသွားမှာပါ။


<html>


<head>


<style>


h2 a {color:#000; }


h2 a:hover {padding: 20px;}


</style>


</head>


<body>


<h2><a href="http:// some thing link" target="_blank">This is Title </a></h2>


</body>


</html>


hover မှာ padding: 20px ဆိုပြီး သက်မှတ်ပေးလိုက်တာပါ။


ဒီ code လေးကတော့ အတော်အသုံးနည်းမှာပါ။ mouse ထောက်လိုက်တဲ့အခါမှာ mouse cursor ကို ပုံစံ တစ်မျိုး change သွားတာပါ။


လောလောဆယ် ကျနော် change လို့ရတာတော့ wait (busy sign) , move , help ဆိုတဲ့ ၃ ခုမျိုးပြောင်းလို့ရပါတယ်။


ရှင်းသွားအောင် အောက်က code လေးကို run ကြည့်လိုက်ပါ။


<html>


<head>


<style>


h2 a {}


h2 a:hover {cursor:wait;}


</style>


</head>


<body>


<h2><a href="http://sawsan23.com" target="_blank">This is Title </a></h2>


</body>


</html>


အခု နမူနာအနေနဲ့က cursor:wait ဆိုပြီး webpage ထဲမှာ busy ဖြစ်နေတဲ့ပုံစံရေးထားပါတယ်၊ curcor: ဘေးက wait နေရမှာ help (or) move ကြိုက်တာ တစ်ခုခုပြောင်းသုံးနိုင်ပါတယ်။


ဒါကတော့ mouse ထောက်လိုက်တဲ့နေရာမှာ ပြောင်ပြောင်လေးတွေပေါ်တာတယ်ဆိုတဲ့ ning ဆိုဒ်တွေလုပ်ခါစက သုံးခဲ့တဲ့ code ပါ။



ဒီလိုပုံစံလေးပါ။ အောက်က code လေးကို run ကြည့်လိုက်ပါ။


<html>


<head>


<style>


h2 a {text-decoration:none}


h2 a:hover {


text-decoration:none;


background:transparent url('http://api.ning.com:80/files/D0t*b1wrUvLAI-l-ORdT8MVgOL1mXWC0m*M-


jqgLh0*UYGloEjtzD*DULCVd5Ojd4Tnfvo-k*EpSXumD2GVKNYYBgu91vZ*9/mouse_hover.gif')}


</style>


</head>


<body>


<h2><a href="http://sawsan23.com " target="_blank">This is Title </a></h2>


</body>


</html>


hover မှာ background ထည့်ပြီး image link ကိုသုံးလိုက်တာပါ။ ဟိုတုန်းကတော့ ဒါမျိုးလေးတွေဆို ဆိုဒ်မှာ သုံးဖြစ်ပါတယ်။ အခုကတော့ အဲ့လို image အစားထိုး သုံးရတဲ့ ဒီဇိုင်းမျိုးကို သိပ်မကြိုက်တော့ပါဘူး။ အခုဒီ code တွေကို ရေးပေးရတာကလည်း html နဲ့ css ကိုမေ့မှာဆိုးလို့ ပြန်နွေးတဲ့အနေနဲ့ကော၊ တခြားလေ့လာနေတဲ့သူတွေအတွက် အကျိုးရှိအောင်ဆိုပြီး ရေးပေးလိုက်တာပါ။ ဒီ code တွေက ကျနော့ဆိုဒ်အတွက် ရေးထားတဲ့ css တွေနဲ့၊ ကိုစေတန် ရဲ့ CSS for starter မှ တစ်ချို့ကို မှီးငြမ်းပြီး ရေးလိုက်တာပါ။ အဆင်ပြေပါစေဗျာ source : www.sawsan23.com

Random Quote

—