HTML ကုဒ္ကေလးေတြ

Marquee ကုဒ္ကေလးမ်ား

Slide-in text:

ဒီပံုစံကေလးကေတာ့ ပံုမွန္အေနနဲ ့တစ္ေခါက္ပဲေျပးပါလိမ့္မယ္၊စာမ်က္ႏွာကေလးကို Reload ျပန္လုပ္ေပးမယ္ဆိုရင္ေတာ့
ဒီပံုစံေလးကိုျပန္ျမင္ရမွာပါ။

<marquee behavior="slide" direction="left">ဒီမွာစာလံုးရိုက္ထည့္ရန္</marquee>

အေပၚက ကုဒ္ကေတာ့ ေအာက္ပါအတိုင္းေတြ ့ရမွာပါ။

ဥပမာအေနနဲ ့

Continuous scrolling text:

<marquee behavior="scroll" direction="left">ဒီေနရာမွာ သင့္စာလံုးရိုက္ထည့္ရန္ </marquee>

အေပၚက ကုဒ္ကေတာ့ ေအာက္ပါအတိုင္းေတြ ့ရမွာပါ။

ဥပမာအေနနဲ ့

အေပၚက ကုဒ္ကေလးရဲ ့Left ဆိုတဲ့ ေနရာကေလးမွာ Right ဆိုတာေျပာင္းရုိက္လုိက္ရင္ ညာဖက္က သြားတဲ့
ပံုစံေလးကို ေတြ ့ႏိုင္ပါတယ္။

Text bouncing back and forth:

<marquee behavior="alternate">ဒီေနရာမွာ သင့္စာလံုးရိုက္ထည့္ရန္</marquee>

အေပၚက ကုဒ္ကေတာ့ ေအာက္ပါအတိုင္းေတြ ့ရမွာပါ။

ဥပမာအေနနဲ ့

Text Scrolling Upwards:

<marquee behavior="scroll" direction="up">ဒီေနရာမွာ သင့္စာလံုးရိုက္ထည့္ရန္ </marquee><br />

အေပၚက ကုဒ္ကေတာ့ ေအာက္ပါအတိုင္းေတြ ့ရမွာပါ။

ဥပမာအေနနဲ ့

အေပၚက ကုဒ္ကေလးရဲ ့UP ဆိုတဲ့ ေနရာကေလးမွာ Down ဆိုတာေျပာင္းရုိက္လုိက္ရင္ အေပၚ ကေန
ဆင္းလာတဲ့ ပံုစံကိုရႏိုင္ပါတယ္။

Change the Scrolling Speed:

<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee><marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee><br/><marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>

အေပၚက ကုဒ္ကေတာ့ ေအာက္ပါအတိုင္းေတြ ့ရမွာပါ။

ဥပမာအေနနဲ ့ (အေႏွးပံုစံ)
ဥပမာအေနနဲ ့ (သာမန္ပံုစံ)
ဥပမာအေနနဲ ့ (အျမန္ပံုစံ)

1 , 10 , 20 ဆိုတဲ့ ေနရာေတြမွာ အလွ်င္ကို ကိုယ္ၾကိဳက္သေလာက္ထားလို ့ရပါတယ္။

အဆင္ေျပႏုိင္ၾကပါေစခင္ဗ်ာ။

ေရခဲဖံုးစာလံုးပံုစံ။

အရင္တစ္ခါကေတာ့ ပူေလာင္ျခင္းကိုလုပ္ၿပီးၿပီ။ဒီတစ္ေခါက္ေအးစက္ျခင္းလုပ္ၾကည့္ရေအာင္ဗ်ာ
။ေရခဲေတြက ေက်ာက္ပန္းဆြဲလုိပံုေလးေတြျဖစ္ေနတာ သူငယ္ခ်င္းတို ့ျမင္ဖူးမွာေပါ့။
အဲဒီလိုမ်ိဳးေလး လုပ္ၾကည့္ရေအာင္။

ပထမဆံုး ဖုိတိုေရွာ့ကို ဖြင့္ပါမည္။
၁) လိုအပ္တဲ့ Background နဲ ့ Text ကို ကိုယ္ၾကိဳက္တဲ့ ေဖာင့္ပံုစံနဲ ့ရီုက္ရေအာင္။
ေရခဲေနတဲ့ ပံုစံေလးလုပ္မွာျဖစ္တဲ့အတြက္ Text Color ကို အျဖဴေရာင္ေလးထားလုိက္မယ္။

၂) မီးေလာင္ေနတဲ့ ပံုေလးလုပ္ခဲ့တုန္းကလိုပဲ
Image > Rotae Canvas > 90° CW ေျပာင္းပါမယ္။
ၿပီးရင္ Text ကို (Filter > Stylize > Wind) ကို၀င္ၿပီး Filter ထည့္ပါမယ္။
Rasterize လုပ္မလားဆိုတဲ့ Box က်လာရင္ OK လို႔ေပးလိုက္ပါ။
ဒါဆိုရင္ Text Layer မဟုတ္ေတာ့တဲ့အတြက္ ေနာက္ထပ္စာျပင္႐ိုက္လို႔မရေတာ့ပါဘူး။
Method=Wind နဲ႔ Direction=From the right မွာထားပါတယ္။
ဒါဆိုေအာက္က ပံုအတိုင္းေတြ႕ရမွာပါ။

၃) ၿပီးရင္ (Image > Rotate Canvas > 90°CCW) ကို ျပန္ေပးပါ။ Layer ရဲ႕ Fill ကို 10%
အနီးတစ္၀ိုက္မွာထားပါမယ္။

၄) Blending Option ထဲက Bevel & Emboss ကို၀င္ပါ။
Setting ေတြကေတာ့ ေအာက္ကအတိုင္းပဲျဖစ္ပါတယ္။
Glass Contour= Ring Double မွာထားပါမယ္။
ဒီ Contour Style က Text ကို ေရခဲနဲ႔တူေအာင္ ဖန္တီးေပးမွာျဖစ္ပါတယ္။
Highlight Mode Color=#d5f5ff နဲ႔ Shadow Mode Color=#1b374a မွာထားပါမယ္။
အျပာႏုနဲ႔ အျပာရင့္ပဲျဖစ္ပါတယ္။

၅) ၿပီးရင္ Outer Glow ကို၀င္ၿပီး အျပာႏုေရာင္ နဲ႔ Opacity=25% မွာထားပါမယ္။
ေရခဲဟာ မွန္နဲ႔ခပ္ဆင္ဆင္ျဖစ္လို႔ Reflection ျပန္ပါတယ္။ ဒီ Outer Glow ကေရခဲအနားစြန္းက
Reflection မ်ိဳးကို ဖန္တီးတာျဖစ္ပါတယ္။

ၿပီးရင္ Inner Glow ကိုလည္း အဲဒီအျပာေရာင္ပဲထည့္ၿပီး Opacity ကိုေတာ့ 75% မွာထားပါမယ္။
ေရခဲတံုးေတြကို ျမင္ဖူးမွာပါ။ ေသခ်ာၾကည့္ရင္ အနားသတ္ေတြက အလယ္ကေရခဲသားလို မၾကည္လင္ပါဘူး။
Inner Glow က အဲဒီ အနားသတ္ေတြက အေရာင္အဆင္းမ်ိဳးကို ဖန္တီးေပးမွာပါ။

အားလံုးလုပ္ၿပီးၿပီဆိုရင္ေတာ့ ေအာက္ပါပံုအတိုင္းေတြ ့ရပါလိမ့္မယ္။

ဒီေနရာမွာရပ္ထားလို႔ရပါတယ္။ ဒါေပမယ့္ ပိုမိုဖန္တီးခ်င္တယ္ဆိုရင္ အဲဒီ Layer ကို Duplicate ထပ္ပြားႏိုင္ပါတယ္။
ဒါဆို ပိုထင္းတဲ့ Text ကို ရရွိမွာျဖစ္ပါတယ္။ ဒါ့အျပင္ Sparkle လို႔ေခၚတဲ့ အလင္းပြင့္မ်ားကို Brush နဲ႔ထည့္လိုက္ရင္ေတာ့
လင္းလက္ေတာက္ပေနတဲ့ ေအးတိေအးစက္ ေရခဲ Text ကို ရရွိမွာျဖစ္ပါတယ္။

မီးေတာက္ပံုေလး

ဒါကေတာ့ ကၽြန္ေတာ္လုပ္ၾကည့္ဖူး Tutorail ကေလးပါ။၀ါသနာပါသူေတြအတြက္ေတာ့ လြယ္ကူပါတယ္။

သူငယ္ခ်င္းမွာ Adobe Photoshop CS3 ရွိရင္ ပိုအဆင္ေျပႏုိင္ပါလိမ့္မယ္။ဘာလုိ ့လည္းဆိုေတာ့ ဒါက CS3 ကိုအေျခ
ခံၿပီးေရးထားတာမုိ ့လို ့ပါ။

၁) PS ကိုဖြင့္ၿပီး New file တစ္ခုကိုေခၚပါတယ္။ေနာက္ၿပီး Text ကိုမီးရွို ့ခ်င္တယ္ဆိုရင္ လိုအပ္တဲ့ Text ကိုရုိက္ပါ။

ကၽြန္ေတာ္ကေတာ့ မင္းခေမာင္ဆိုၿပီး ေနာက္ခံအျပာေလးနဲ ့ ရိုက္လုိက္ပါတယ္။

၂) Layer style ကို Gradient Overlay ထည့္ပါမယ္။လိုအပ္တဲ့ Gradient Fill မွာ မိမိထည့္ခ်င္တဲ့ မီးေတာင္အေရာင္ကို
မိမိၾကိဳက္သလို သံုးႏုိင္ပါတယ္။မီးအေရာင္ခပ္ရင့္ရင္ေလးလုိခ်င္တယ္ဆိုရင္ေတာ့ Red, Orange, Red

စသျဖင့္မိမိၾကိဳက္သလိုသံုးႏုိင္ပါတယ္။ကၽြန္ေတာ္သံုးထားတာက Orange,Yellow,Orange ပါ။

ၿပီးရင္ Inner Glow လုပ္ပါမည္။

အနီ၀ိုင္းထားသည့္အတိုင္း ကာလာကိုအနက္ေရာင္ေျပာင္းၿပီး Blending Mode ကို Normal သို ့ေျပာင္းပါ။
Elements Size မွာ ပံုကိုလုိက္ၿပီး အေျပာင္းအလဲရွိပါသည္။ေအာက္ပါအတုိင္းေတြ ့ရမည္ျဖစ္သည္။

၄) Duplicate Layer သို့မဟုတ္(Ctrl +J) ကို ေခၚပါ။Layer Paette တြင္ထို Layer အသစ္ကို Right Click ႏွိပ္ျပီး Rasterize
Type ကို ေရြးပါ။ျပီးလွ်င္ ေအာက္Layer မွမ်က္လံုးပံုကို ႏွိပ္ျပီး ေခတၱေဖ်ာက္ထားပါမည္။အေပၚမွဖြင့္ထားေသာ Layer ကို (Image >Rotate Canvas >90 CW) ျဖစ္ေအာင္လွည့္လုိက္ပါ။

၅)ထို ့ေနာက္္(Filter >Stylize>Wind ) ကို၀င္ပါ။ (Wind , From Lfet) ကို ေရြးပါ။ပုံအတိုင္းေတြ ့ ရမည္။
မီးေတာက္ရွည္ရွည္ လုပ္ခ်က္ရင္ေတာ့ (Ctrl +F) ကိုႏွိပ္ျပီး Wind Filter ကို အထပ္ထပ္ထည့္ႏိုင္ ပါသည္။
ကၽြန္ေတာ္ကေတာ့ Wind Filter ႏွစ္ခါ ထည့္ပါသည္။

၆)ၿပီးေနာက္ Layer>Rotate Canvas >90 CCW ကိုေရြးပါ။ျပီးလွ်င္ (Filter>Distort > Ripple)ကုိေရြးပါ။ေအာက္ပါအတုိင္း
ေတြ ့ရမည္။

၇) ထို Tools ျဖင့္ Text ကို မီးေတာက္ကဲ့သို ့ ျဖစ္ေအာင္ အထက္ဘက္သို ့ ပြတ္ဆြဲေပးပါ။ ေနရာ၌ Filter>Liquify ကိုအသုံးျပဳလည္း ရပါသည္။

ေအာက္ပါအတိုင္းေတြ ့ရပါသည္။

၈) ထို ့ေနာက္ေအာက္မွပိတ္ထားေသာမ်က္လံုးပံုကေလးမ်ားကိုျပန္ဖြင့္ပါ။။ Blending Options ကို ၀င္ပါ။ပထမ Set လုပ္ထားေသာ Inner Glow ႏွင့္Gradient မ်ားကိုျဖဳတ္ပါ။ ဒီအဆင့္မွာေတာ့ သင္ၾကိဳက္ႏွစ္သက္ရာ Effect ကိုထည့္ႏိုင္ပါသည္။ နမူနာပံုအတိုင္းဆိုရင္ေတာ့ Bevel & Emboss ကိုေရြးပါ။Inner Bevel ျဖစ္ျပီး Glass Contour ကို Cove-Deep သို့ေျပာင္းပါ။ Text ကိုဖန္သားကဲ့သို့ ျပဳလုပ္ျခင္းျဖစ္သည္။Shadow Mode Color ကို အ၀ါေရာင္ ကိုေရြးပါ။မီးအေရာင္ဟပ္သကဲ့သို ့ ျဖစ္ေစရန္ျဖစ္သည္။

၉) ျပီးလွ်င္ ထုိLayer ကို အေပၚဆံုး Layer ျဖစ္ေအာင္Drag ဆြဲျပီးအေပၚသို ့ေရႊ ့ပါ၊ျပီးလွ်င္Fill Percentage ကို(0%) သို ့ ေရႊ ့ပါ။ ပုံအတိုင္းေတြ ့ရမည္ျဖစ္သည္။

၁၀) ၿပီးရင္ Save As နဲ ့မိမိၾကိဳက္တဲ့ ဖိုင္ပံုစံ Save လိုက္ပါ။

ဒီပံုစံေလးအတိုင္းရမွာျဖစ္ပါတယ္

ကိုယ္ၾကိဳက္တဲ့ စာေတြ ပံုေတြကိုလည္း အထက္ပါအတိုင္းအေျခခံၿပီးမီးေတာက္ပံုေလးေတြကို ဖန္တီးလို ့ရပါတယ္။ဒီေအာက္က ပံုကေတာ့ ျမန္မာဖုိတိုေရွာ့ က်ဴတိုရီယယ္က လုပ္ထားတဲ့ပံုေလးပါ။အေပၚကပံုထက္အမ်ား
ၾကီးပိုလွပါတယ္။

အဆင္ေျပႏုိင္ၾကပါေစဗ်ာ။

*************************************************************************************************