အခုေလးတင္ ရွာေတြ႔လာတဲ့ နည္းတစ္ခုဗ်။
က်ေနာ္ ခုနက Forum Post ေတြမွာ Text Shadow ထည့္ရင္းနဲ႔ Link အတြက္လည္း ထည့္ရင္းနဲ႔ Multiple Shadow ထည့္လို႔ရမရ စမ္းၾကည့္တာ ရသြားလို႔။

သိတဲ့သူ နည္းဦးမယ္ထင္တယ္။ က်ေနာ္ေတာင္ စမ္းရင္းနဲ႔မွ မေတာ္တဆ ရွာေတြ႔တာ။

Multiple Shadow မေၿပာခင္
ရိုးရိုး Text Shadow အေၾကာင္းေတာ့ အရင္ေၿပာၾကည့္မယ္။

Code:

<p id="example-text">I Love MITR!</p>

Code:

#example-text {
text-shadow : 3px 3px 2px #888;
}

အဲဒီ့မွာဆုိရင္ text-shadow ရဲ႕ ပထမ ..px ..px ႏွစ္ခုက ၊ ေဒါင္လိုက္ နဲ႔ ေရၿပင္ညီ အတြက္ ၿဖစ္ပါတယ္။
အေပါင္းတန္ဖိုးဆုိရင္ စာရဲ႕ ညာဘက္ နဲ႔ ေအာက္ဘက္ မွာ အရိပ္ေပၚပါလိမ့္မယ္
အႏႈတ္တန္ဖိုးဆုိရင္ေတာ့ သူ႔ေၿပာင္းၿပန္ေပၚပါလိမ့္မယ္။

ေနာက္ဆုံးက ..px ကေတာ့ အဲဒီ့ အရိပ္ရဲ႕ sharpness ကိုသတ္မွတ္ပါတယ္။
တန္ဖုိးမ်ားေလ blur ၿဖစ္ေလၿဖစ္ပါတယ္။

ေနာက္ဆုံးက #code ကေတာ့ ကာလာကုဒ္ေပါ့။ အရိပ္အေရာင္အတြက္ သတ္မွတ္လို႔ရပါတယ္.

ကဲ ဒါဆုိရင္ Text-shadow အေၾကာင္းေတာ့ ေၿပာၿပီးၿပီဆုိေတာ့
multiple လုပ္ၾကည့္ရေအာင္

နမူနာ HTML code ကေတာ့

Code:

<p id="example-text">I Love MITR!</p>

ဒါကေတာ့ CSS code ပါ

Code:

#example-text {
text-shadow :0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
font-size : 30px;
font-weight : bold;
color : red;
}


အဲဒါဆုိရင္ေတာ့ Font အနီေရာင္ေလးနဲ႔ မီးေတာက္ေလးရလာၿပီေပါ့။ စမ္းၾကည့္ၾကပါ။
color code ေတြကေတာ့ မီးေတာက္တစ္ခုကေန ယူသံုးထားတာၿဖစ္ပါတယ္
ဒီ့ထက္ ပိုေကာင္းတဲ့ Tricks ေလးေတြရလာရင္ေတာ့ ၿပန္လည္မွ်ေ၀ၾကပါဦး။

က်ေနာ္ ခုနကေတာင္ Forum Link ေတြမွာ စမ္းထည့္ထားေသး။

အခု Gtalk မွာ လူ ေတာ္ေတာ္မ်ားမ်ား ေမးလာလို႔။
ဖိုရမ္က Link Hover က ဘယ္လိုလုပ္လိုက္တာလဲတဲ့။
Image သံုးထားတာလားတဲ့။ နည္းနည္းမွ်ေ၀ပါဦးဆုိလို႔ ပါ။ (တကယ္ေတာ့ မွ်ေ၀ၿပီးသား။ အေပၚ ပိုစ့္မွာေလ)

အင္းေလ။ Image သံုးထားတယ္လို႔ ထင္ခ်င္လဲထင္ၾကမွာေပါ့။
အဲဒါက ဟိုးေရွးေရွးတုန္းက လူသံုးမ်ားတဲ့ နည္းတစ္ခုကို.

အခု CSS 3 ေပၚလာတဲ့ အခါမွာေတာ့ glow image သံုးစရာလုိကိုမလိုေတာ့တာပါ။
ဥပမာ ၿပရမယ္ဆုိရင္။
က်ေနာ္သံုးထားတဲ့ code ကေတာ့...

Code:

text-shadow: 1px 1px 10px #55ff00;

အဲဒီ့ Code မွာ shadow ကို လုိခ်င္တဲ့ အေရာင္ေရြးၿပီးေတာ့ ၊ လိုခ်င္သေလာက္ ၀ါးလိုက္။ အဲဒီ့အခါမွာ ကိုယ္လိုခ်င္တဲ့ glow effect ရလာပါလိမ့္မယ္။

က်ေနာ္ကေတာ့ hover မလုပ္ခင္မွာ text shadow color က အမဲလုပ္ထားေတာ့ ထင္းေနပါတယ္။ ၿပီးတာနဲ႔ hover လုပ္လိုက္တာနဲ႔ စိမ္းစိမ္းေလး၀ါးလိုက္ေတာ့ Glow လုပ္သလိုၿဖစ္သြားတာပါ။
hover လုပ္တုန္းမွာ link color ကိုလည္း အစက အမဲထားထားတာ ၊ ညီေတာ္ alt.332 က မလွဘူးဆုိလို႔ အစိမ္းဘဲထားလိုက္တာ။

ကဲ စမ္းၾကည့္ၾကပါဦး။
ကုိယ့္ Page ရဲ႕ Nav Bar ေတြ ၊ link ေတြမွာ Hover effect လွလွေလးေတြ နဲ႔ အလွဆင္ႏုိင္ၾကပါေစ။