မေန႔ညကတုန္းက ေနာင္ေတာ္ $ƴǩǾ ေပးတဲ့ Text effect ေလးစမ္းရင္းနဲ႔ Border Effect ေလးတစ္ခု စမ္းလို႔ေတြ႕လို႔ Share လိုက္ပါတယ္ဗ်ာ....အေသးအဖြဲေလးပါပဲ သိၿပီးတဲ့သူမ်ားကေတာ့ မျမင္ျခင္ ေယာင္ေဆာင္ ေပးၾကပါလို႔

Perview Link

Code:

http://www.myanmaritresource.info/outsider-h16.htm

ရိုး၂ ေလးကိုပဲသံုးသြားတာပါ....

CSS နဲ႔ Border ယူၿပီးေတာ့ Border type 2 မ်ဳိးကို hover နဲ႔ခ်ိန္းလိုက္တာပါ....ေနာက္တစ္ခုကေတာ့ ေနာင္ေတာ္ $ƴǩǾ တင္ေပးတဲ့ shadow effect ကို သံုးလိုက္တာပါ....

CSS Code

Code:


a
{
border:outset #000;
text-decoration:none;
text-align:center;
}

a:hover
{
border:inset #000;
text-decoration:none;
text-align:center;
text-shadow:0px 0px 4px #0F0;
}


ညေန တုန္းက အခ်ိန္သိပ္မရလို႔ ကၽြန္ေတာ္ အေပၚက Code ေတြကို ရွင္းမျပလိုက္ရဘူး....

border:outset #000 ဒီ Code က ကၽြန္ေတာ္တို႔ Home တို႔ About Us တို႔ရဲ႕ Border အတြက္ေရးထားတာပါ.... outset ဆိုတာက Border Type ပါ...
Border Type ေတြကိုသိခ်င္ရင္ေတာ့ စာဖတ္ၾကပါ။
#000 ဆိုတာကေတာ့ Color code ပါ... black ဆုိၿပီးလည္းသံုးလို႔ရသလို ၊ CSS style rgb ( .., .., ..) လို႔လည္းသံုးလုိ႔ရပါတယ္။

text-align:center ဆိုတာကေတာ့ Border အတြင္းက Text ကို center ပို႔ဖို႔အတြက္ ေရးထားတာပါ...

a:hover ထဲမွာေတာ့ ကၽြန္ေတာ္ Border Type ကို inset လို႔ခ်ိန္းလိုက္ပါတယ္...ေနာက္ၿပီး ေအာက္က ေနရာက ကၽြန္ေတာ့္ ေနာင္ေတာ္ တင္ေပးထားတဲ့ shadow-text ကိုေခၚသံုးထားတယ္....

Code:

http://www.myanmaritresource.info/cascading-style-sheet-f30/press-text-effect-using-css-3-tips-tricks-t3108.htm

ကၽြန္ေတာ္လဲ သိသေလာက္ေလး ျပန္ Share ေပးတာပါ အမွားပါခဲ့ရင္ ျပင္ဆင္ေပးၾကပါဦးခင္ဗ်ာ

ညီေတာ္ alt ရွင္းသြားတဲ့ထဲမွာ အစ္ကိုတို႔အေနနဲ႔ Border Style ကို အနည္းငယ္ရႈပ္ေထြးေကာင္းရႈပ္ေထြးေနပါလိမ့္မယ္။
အဲဒီ့အတြက္ Border Style ေတြကို ဥပမာနဲ႔တကြ ေရးေပးလိုက္ပါတယ္

Border Style ေတြကေတာ့

none: Border မရွိဘူးဆုိၿပီး သတ္မွတ္ပါတယ္။

dotted: အစက္အစက္ ပံုစံေလးေတြနဲ႔ သတ္မွတ္ပါတယ္။

dashed: မ်ဥ္းၿပတ္ေလးေတြနဲ႔ သတ္မွတ္ပါတယ္။

solid: အသံုးအမ်ားဆုံးၿဖစ္ၿပီးေတာ့ မ်ဥ္းအၿပည့္ၿဖစ္ပါတယ္။

double: Border ႏွစ္ခုအေနနဲ႔ သတ္မွတ္ပါတယ္။ width ကိုေတာ့ border-width နဲ႔ ၿပင္ခြင့္ရိွပါတယ္။

groove: groove style 3D Border ၿဖစ္ပါတယ္။ border-color သတ္မွတ္တတ္ေလေလ ၊ လွေလေလၿဖစ္ပါတယ္။

ridge: ridge style 3D border ၿဖစ္ပါတယ္။ border-color သတ္မွတ္တတ္ေလေလ ၊ လွေလေလၿဖစ္ပါတယ္။

inset: alt သံုးသြားတဲ့ border ေလးပါ။ border-color သတ္မွတ္တတ္ေလေလ ၊ လွေလေလၿဖစ္ပါတယ္။

outset: outset border ၿဖစ္ပါတယ္။ border-color သတ္မွတ္တတ္ေလေလ ၊ လွေလေလၿဖစ္ပါတယ္။

reference : w3Schools

ေနာက္ Border Effect တစ္ခုကေတာ့ Outline ပါ....ဘယ္လိုသံုးလဲဆိုေတာ့... အေပၚဘက္က ေနာ္ေတာ္ $ƴǩǾ ျပသြားတဲ့ Border ေတြကို ေနာက္ထပ္ Border တစ္ခု ထပ္ရံဖို႔အတြက္သံုးပါတယ္...

Code:


a
{
border:inset #000;
outline:dotted red thick;
text-decoration:none;
text-align:center;
}


Preview

Now we're using outline.

ေက်းဇူးဗ်ိဳ ့။ေတာ္ေတာ္ ေတာင္သိသြားၿပီ။