Design

Text Glow Animation

မဂၤလာပါခင္ဗ်။

ကၽြန္ေတာ္ကေတာ့ Spiceworks Myanmar Company တြင္ Web Designer အျဖစ္ ဝင္ေရာက္လုပ္ကုိင္ လ်က္ရွိေသာ ေက်ာ္စိုးနိုင္ ျဖစ္ပါတယ္။

ဒီတစ္ပတ္မွာေတာ့ CSS Animation ထဲမွ text Glow Animation အေျကာင္း မွ်ေဝ‌ေပးခ်င္ပါတယ္ခင္ဗ်။ပထမဦးဆုံးအေနနဲ့ CSS Text Glow Animation ကုိ create ျပဳလုပ္မယ္ဆုိရင္ အသုံးဝင္ေသာ CSS properties
ႏွစ္ခုကိုေျပာျပခ်င္ပါတယ္ခင္ဗ်။ အဲဒီႏွစ္ခုကေတာ့
1.Text Shadow
2.Filter
ျဖစ္ပါတယ္။

TEXT Shadow ဆုိသည္မွာ Text ေတြကို ေနာက္ခံ shadow ထည့္ျပီး decoration လုပ္ရာမွာ အသုံးဝင္ေသာ properties တစ္ခု ျဖစ္ပါတယ္။

Text shadow တစ္ခု create ျပုလုပ္မယ္ဆုိလွ်င္ value ၃ ခုျဖင့္ ေပါင္းစပ္ဖန္တီးနုိင္ပါတယ္။
1. offsetX ,offsetY  -text တစ္ခုရဲ့ Shadow Distance or Shadow length ကို သတ္မွတ္ေပးေသာ horizontal value offsetX ႏွင့္ Vertical Value offset Y
2. Color – text တစ္ခုခ်င္းစီ၏ background shadow အေရာင္ကို သတ္မွတ္ေပးပါတယ္။
3. blur-radius -shadowတစ္ခုကို ပိုၿပီး wider ျဖစ္ခ်င္တဲ့အခါ ဒါမွမဟုတ္  ပိုၿပီး lighter ျဖစ္ခ်င္တဲ့အခါမ်ိဳးမွာ သတ္မွတ္ေပးပါတယ္။
ေအာက္ေဖာ္ျပပါ အတိုင္း ေရးေပးလုိ့ရပါတယ္ခင္ဗ်။

 

/* offset-x | offset-y | blur-radius | color */

text-shadow: 1px 1px 2px black;


/* color | offset-x | offset-y | blur-radius */

text-shadow: #fc0 1px 0 10px;


/* offset-x | offset-y | color */

text-shadow: 5px 5px #558abb;


/* color | offset-x | offset-y */

text-shadow: white 2px 5px;


/*offset-x | offset-y /*

Use defaults for color and blur-radius */

text-shadow: 5px 10px;

တစ္ခုထက္မကတဲ့ shadow ေတြကို  create ျပဳလုပ္ေတာ့မယ္ဆုိရင္ comma ျဖင့္ separate လုပ္ျပီး အဆုံးမွာေတာ့ semicomma ျဖင့္ အဆုံးသတ္ျပီး အသုံးျပဳ ဖန္တီးနိုင္ပါတယ္။

 
text-shadow: 0 0 10px #FA1C16,
0 0 30px #FA1C16,
0 0 100px #FA1C16,
0 0 100px #FA1C16,
0 0 40px #FED128,
30px 30px 10px #806914;

ေနာက္ထပ္properties တစ္ခုကေတာ့ Filter ျဖစ္ပါတယ္။Filter ကေတာ့ graphic effect တစ္ခုျဖစ္ျပီး blur ႏွင့္ color shifting လုပ္ေဆာင္ခ်က္တုိ့နွင့္တူညီပါတယ္။အမ်ားအားျဖင့္ Filter ကို image rendering , background နွင့္ border တုိ့ကို adjust လုပ္တဲ့အခါမွာ အသုံးျပဳနုိ္င္ပါတယ္ခင္ဗ်။

Filter ကို အသုံးျပဳမယ္ဆုိရင္ filter ကို support လုပ္ေပးနုိင္တဲ့properties မ်ားစြာရိွပါတယ္။ အသုံးမ်ားေသာ properties အားျဖင့္ blur, brightness, saturation, contrast, gray-scale, hue-rotate တုိ့ ျဖစ္ပါတယ္။
ေအာက္ေဖာ္ျပပါအတုိင္းအသုံးျပဳျပီး ေရးသားနိုင္ပါတယ္ခင္ဗ်။

 
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: opacity(25%);
filter: saturate(30%);

CSS properties နွစ္ခုုျဖစ္ေသာ Text shadowႏွင့္ Filter ရဲ့ အသုံးျပဳပုံကို သိရိွျပီး Text တစ္ခုကို Animation ျဖင့္ ေအာက္ပါအတိုင္း decortion လုပ္နိုင္ပါတယ္ခင္ဗ်။


text decoration လုပ္ျပီးေနာက္မွာပိုၿပီး အသက္ဝင္လႈပ္ရွားလာေစရန္အတြက္ Animation delay ကို adjust လုပ္ျပီး text glow Animation တစ္ခုကိုဖန္တီးနိုင္ပါတယ္။

Click Here >>>To View Text_Glow Animation

Text glow animation ကို အမ်ားအားျဖင့္Website ေတြမွာ header ကို ပိုမို သိသာထင္ရွားေစရန္အတြက္  အသံုးျပဳတာကို ျမင္ေတြ႕ရပါတယ္။ထို့အျပင္အစားအေသာက္ႏွင့္ပတ္သက္ျပီး အစားအစာေတြကို advertise လုပ္တဲ့ ေနရာမွာလဲ text glow animation ျဖစ္ဖန္တီး အသုံးျပဳနုိင္ ပါတယ္။အခ်ိန္ေပးျပီး ဖတ္ရွဳေပးတဲ့အတြက္ေက်းဇူးတင္ပါတယ္ခင္ဗ်။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *