ထား၀ယ္ IT ဆိုက္မွအားလံုးကိုၾကိဳဆိုပါတယ္(က်ေနာ္မအားမလပ္ျဖစ္ေနေသာေၾကာင့္ဒီ ဆိုက္ကိုအေကာင္းဆံုးမလုပ္ႏိုင္တာခြင့္လႊတ္ၾကပါခင္ဗ်ား)Admin ထား၀ယ္သား ေရခ်မ္း

Serial key နဲ key Generater ေမ်ားရယူႏိုင္ေသာေ

Serial key နဲ key Generater မ်ားရယူႏိုင္ေသာ ဆိုက္ပါ

http://keygenguru.com/
software နာမည္ နဲ ့version ေရးျပီးရွာပါ ေတာ္ေတာ္ကိုစံုလင္စြာရွိပါတယ္

Dawei IT Search(ရွာေဖြရန္)

Translate ဘာသာျပန္ၾကမယ္

Wednesday 26 October 2011

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.tk ” 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.tk ” 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.tk ” 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.tk ” 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.tk” 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/files/D0t*b1wrUvLAI-l-ORdT8MVgOL1mXWC0m*M-jqgLh0*UYGloEjtzD*DULCVd5Ojd4Tnfvo-k*EpSXumD2GVKNYYBgu91vZ*9/mouse_hover.gif’)}
_</style>
_</head>
_<body>
_<h2><a href=”http://sawsan23.tk ” 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.tk
Posted by at
www.daweiit.blogspot.com

No comments:

Post a Comment

daweiit@gmail.com

Subscribe to: Post Comments (Atom)