က်ေနာ္ ဒီေန႔ text-shadow ကို ေကာင္းေကာင္း ႏိုင္နင္းေအာင္ ၊ tricks ေတြရွာ ၊ စမ္းသပ္ လုပ္ေနတာ ၊ ေတာ္ေတာ္မ်ားမ်ားေတာ့ အဆင္ေၿပလာၿပီ။
အခုလည္း ေနာက္ထပ္ effect တစ္ခု စမ္းသပ္တာ ေအာင္ၿမင္သြားလို႔ ေၿပာၿပပါဦးမယ္။ (ဒီနည္းကေတာ့ ေတာ္ေတာ္မ်ားမ်ားက သံုးႏွင့္ၿပီးသား နဲ႔ သိႏွင့္ၿပီးသား)
အရင္ကတည္းက က်ေနာ္လည္း သူမ်ားေတြလို ရေအာင္ လုပ္ၾကည့္ေပမယ့္ ေသခ်ာ အခ်ိန္ယူမလုပ္ေတာ့ သူ႔ Concept ကို ေသခ်ာနားမလည္ခဲ့ဘူး။
အခုေတာ့ ေသခ်ာ နားလည္သြားလို႔ ၿပန္ေၿပာၿပတာပါ။

ကဲ က်ေနာ္တို႔ ရမယ့္ ေနာက္ဆုံး Effect ကေတာ့



တကယ္ေတာ့ လူ႔မ်က္စိကို လွည့္စားသြားတာ။ ေသခ်ာၾကည့္ရင္ လုံးေနတာ။ ထြင္းထားတာ ဟုတ္ဘူး။

ကဲ က်ေနာ္တို႔ ဒီ Effect ကို လုပ္ၾကည့္ရေအာင္။
မလုပ္ခင္မွာ မွတ္ထားရမယ့္ concept ကေတာ့ ၊

>> Font အေရာင္က background အေရာင္ထက္ ရင့္ရပါမယ္။ ဒါေပမယ့္ shadow အေရာင္ကေတာ့ font နဲ႔ bg အေရာင္ထက္ ႏုရပါလိမ့္မယ္။ <<
အဲဒါကေတာ့ က်ေနာ္လည္း အၾကိမ္ေပါင္းမ်ားစြာ စမ္းၾကည့္ရင္းနဲ႔ ရလာတဲ့ အေတြ႔အၾကံဳၿဖစ္ပါတယ္။

အေပၚကပံုမွာ သံုးထားတဲ့ ကုဒ္ကေတာ့..

Code:

<p style="text-shadow: 2px 2px 2px #373737; font-size: 40px; color: #000; background-color: #222725;" align="center">MITR 2.0 (Project Plan)</p>

အဲဒီ့မွာ အဓိက ၾကည့္ရမွာကေတာ့
text-shadow ပါ။ (အေၿခခံကိုေတာ့ http://www.myanmaritresource.info/cascading-style-sheet-f30/multiple-text-shadow-flaming-text-with-css-3-tips-tricks-t3097.htm#15546 မွာ ရွင္းၿပၿပီးၿဖစ္ပါတယ္။)

အဲဒါကို ၿပန္မရွင္းေတာ့ပါဘူး။ px ေတြကေတာ့ လိုသလို ၿငိွသြားရမွာပါ။
သူ႔ရဲ႕ ကာလာ ကိုဘဲ ေသခ်ာေရြးရမွာၿဖစ္ပါတယ္။

က်ေနာ္ တို႔ bg color က နည္းနည္း ႏုေအာင္ ေရြးထားပါတယ္။ (Color Code ကို ေရြးခ်င္ရင္ၾကိဳက္ႏွစ္သက္သလို ေရြးလို႔ရပါတယ္။ က်ေနာ္ကေတာ့ PS နဲ႔ဘဲေရြးေလ့ရိွတယ္။)
ၿပီးေတာ့ font color ကိုေတာ့့ ထြင္းထားတာမ်ိဳးၿဖစ္ေအာင္ black ေရြးထားပါတယ္။
ေနာက္ဆုံးတစ္ဆင့္က်ေတာ့ shadow ကို bg နဲ႔ font ထက္ ႏုထားပါတယ္။

အဲလိုလုပ္လုိက္ခ်င္းအားၿဖင့္ က်ေနာ္တုိ႔ေတြ user ကို လွည့္စားၿပီးသားၿဖစ္သြားပါတယ္။
အထဲကို ထြင္းထားသလို ၿဖစ္ေနေစပါတယ္။ text shadow က ပါးပါးေလးလုပ္ထားေတာ့ ထြင္းထားသလိုၿဖစ္သြားတာ။ တကယ္ေတာ့ လုံးေနတာ။

အဆင္ေၿပၾကပါေစ။
feedback & suggestion are happily welcome. I'll happy when I see your tricks. Please share with me.

Nice trick bro.. but I have 1 complain

I think External or Internal method iz clearer than Inline... I mean those two iz easy to understand. Just advice.

Thz for share.

ဟဲဟဲ။ ဒါကေတာ့ ငါ အပ်င္းၾကီးလို႔ကြ။
ၿပီးေတာ့ ဒီ လိုင္းေလးတစ္ခုထဲကို COPY/Paste လုပ္ခ်င္တဲ့သူေတြ အတြက္လည္း အဆင္ေၿပေအာင္လို႔။
inline လည္း မဆုိးပါဘူး။

ahh. You can see the live demo below

Code:

http://www.myanmaritresource.info/MITR-20-Project-Plan-h14.htm

that's my CSS 3 playground.