CSS3 မှာ box-shadow ဆိုတဲ့ property အသစ် ပါဝင်လာခဲ့ပါတယ်။ box-shadow ဆိုတဲ့အတိုင်းပဲ အသုံးပြုချင်တဲ့ element ရဲ့ frame ကနေပြီးတော့ shadow ချပေးတာ ဖြစ်ပါတယ်။ တကယ်လို့ border-radius ဆိုတဲ့ property ကိုသုံးပြီး ထောင့်ချိုးတွေကို ကွေးထားရင်လဲ box-shadow ပါလိုက်ကွေးပေးမှာဖြစ်ပါတယ်။
Box-shadow property ကိုသုံးမယ်ဆိုရင်တော့အောက်ကလို သုံးကြောင်းကြေငြာပေးရပါမယ်။

-moz-box-shadow: 1px 1px 1px black;
-webkit-box-shadow: 1px 1px 1px black;
        box-shadow: 1px 1px 1px black;

moz browser (eg: Firefox) တွေအတွက် -moz-box-shadow ဆိုပြီးရေးပေးရပါမယ်။

webkit browser(eg: Chrome, Safari) တွေအတွက် -webkit-box-shadow ဆိုပြီးရေးပေးရပါမယ်။

ဒါပေမယ်. Firefox 4 , Chrome 10 ကနေစပြီးတော့ box-shadow ဆိုပြီး တစ်ကြောင်းထဲရေးလို့ရပြီဖြစ်ပါတယ်။

( ပုံတွေမှာ box-shadow ပဲရေးပြထားတာနော်။ မဆန့်လို့။ တကယ်ရေးရင် အပေါ်မှာပြောခဲ့သလို ၃ ကြောင်းရေးပေးရပါမယ်။ )

Box-shadow ရဲ့ Syntax ကတော့ဒီလိုရေးရပါတယ်။

Box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

Offset-x ဆိုတာကတော့ shadow ချချင်တဲ့ frame ရဲ့ horizontal distance ပါ။ မဖြစ်မနေထဲ့ပေးရပါမယ်။

Offset-y ဆိုတာကတော့ shadow ချချင်တဲ့ frame ရဲ့ vertical distance ပါ။ မဖြစ်မနေထဲ့ပေးရပါမယ်။

Offset-x ရော y ရောသူတို့ရဲ့ တန်ဖိုးကို negative value ပါပေးလို့ရပါတယ်။ စမ်းကြည့်ကြည့်ကြပါ။

Blur-radius ဆိုတာကတော့ blur ဖြစ်စေချင်တဲ့ ပမာဏပါ။ တန်ဖိုးကြီးလာလေလေ shadow လဲလိုက်ကြီးလာပြီး အရောင်ပိုဖျော့လာမှာဖြစ်တယ်။ အောက်ကပုံ၂ပုံကို ကြည့်လိုက်ရင် ရှင်းသွားမှာပါ။ သူ့မှာတော့ negative value ပေးလို့မရပါဘူး။ ဘာတန်ဖိုးမှ ထဲ့မပေးလိုက်ရင်တော့ 0 ဆိုပြီးauto မှတ်ယူလိုက်မှာဖြစ်ပါတာယ်။

Spread-radius ဆိုတာကတော့ ကိုယ်shadow ချချင်တဲ့ element ရဲ့size ထက်ကြီးချင် ငယ်ချင်တဲ့အခါသုံးပါတယ်။ ဘာတန်ဖိုးမှထဲ့မရေးပေးရင်တော့ default value 0 လို့သတ်မှတ်ပေးသွားမှာပါ။ element ရဲ့ frame နဲ့ size တူတူပဲပေါ့။ positive value ပေးရင်တော့ တန်ဖိုးကြီးလေလေ size လဲကြီးလေလေ ဖြစ်လာမှာပါ။ negative value ဆိုရင်တော့ ငယ်ငယ်လာမှာပေါ့။ အကယ်လို့သာ negative value ပေးခဲ့ရင် သတိထားရမှာက x,y တန်ဖိုးသာ spread-radius ထက်နည်းရင်တော့ element အောက်ထဲ shadow ရောက်သွားပြီး မြင်ရတော့မှာမဟုတ်ပါဘူး။အောက်ဆုံးပုံကိုကြည့်လိုက်ဗျာ။ -5px ချုံ့ထားတယ်၊ x,y ကိုသာ 3px လောက်ပဲခွါကြည့်ကြည့် shadow ကအောက်ထဲရောက်ပြီး ပျောက်နေရော။

Color ကတော့ရှင်းပါတယ်။ shadow color ပေါ့။ ဘာမှထဲ့မရေးပေးလိုက်ဘူးဆိုရင်တော့ browser ကသတ်မှတ်ပေးတဲ့အတိုင်း ရှိမှာပါ။ Firefox မှာတော့ default အဖြစ် အနက်ရောင်ထဲ့ပေးပြီး Chrome မှာတော့ transparent သတ်မှတ်ပေးထားပါတယ်။

တကယ်လို့များ shadow ကို Inner shadow ကျချင်တာဆိုရင်တော့ inset ဆိုတာလေးထဲ့ပေးရပါတယ်။

box-shadow: 3px 3px 3px #000 inset;   (or)
box-shadow: inset 3px 3px 3px #000;

နောက်တစ်ခုမိုက်တာက multiple shadow ထဲ့ချင်လား ရသေးတယ်ဗျာ။ ပုံကိုကြည့်လိုက်ဗျာ…. ဘယ်ဘက်မှာ အစိမ်း၊ ညာဘက်မှာ အနီ၊ အပေါ်ဘက်မှာ အဝါ၊ အောက်ဘက်မှာ အနက် ဆိုပြီး shadow layer ၄ခုတွေ့ရမယ်။

သူ့ရဲ့ ရေးနည်းကဒီလို…..

box-shadow: 3px 0px 3px red, -3px 0 3px green, 0px -3px 3px yellow, 0px 3px 3px black;

ကော်မာခံပြီးရေးပေးလိုက်ရုံပါပဲ။ ဒီနေရာမှာ တစ်ခုပြောချင်တာက အခုဆိုရင် shadow layer က ၄ခုတောင်ထပ်ထားတာဗျာ။ ဒီတော့ဘယ်သူကအပေါ်ဆုံးမှာနေမှာလဲ……။ အနီလား၊ အစိမ်းလား၊ အဝါလား၊ အနက်လား…….။ ပထမဆုံး ရေးတဲ့သူက အပေါ်ဆုံးအလွှာပါပဲ။ ပထမဆုံးကနေ နောက်ဆုံးထိကို အစဉ်လိုက်အတိုင်းပဲ အပေါ်ကနေအောက်လို့ မှတ်ထားလိုက်ရုံပါပဲ။

ကဲ…အားလုံးပဲ ပျော်ရွှင်ကြည်နူး နိုင်ကြပါစေဗျာ…။

8 Responses

1. HeinLay says:

   June 8, 2011 at 7:10 PM

   IE မှာက အခုဟာတွေက အလုပ်မဖြစ်ဘူး ထင်တယ်။
   IE က Web design ဆွဲရင် ကိုးလို့ ကန့်လန့် နဲ့ ။

   Reply
2. မြန်မာ့သွေး says:

   June 8, 2011 at 7:39 PM

   ဘယ့်​နယ်​ဗျာ… IE က​လုံး​၀ Standard ဗျ…IE Frame နဲ့​မ​ကိုက်​ရင် ကိုယ်​ဆွဲထား​တာ လို​နေ​လို့​ဗျ…

   Reply
   • HeinLay (HeinZawHtet) says:

     June 12, 2011 at 7:02 PM

     @မြန်မာ့သွေး
     ဘယ့် နယ့် ဗျာ …

     World Wide Web Consortium (W3C) sets the standards. Browsers implement them, and not necessarily all of them or even implement them correctly. So Internet Explorer is not the standard, nor is any of the other browsers out there.

     Reply
3. THIHA says:

   June 8, 2011 at 8:13 PM

   IE 10 မှာတော့ အဆင်ပြေပါတယ် ဒါပေမယ့် IE မှာ အဆင်ပြေအောင် တစ်ခြားဟာ တစ်ခုထည့်ပေးရင် အဆင်​ပြေနိုင်ပါတယ်

   Reply
   • HeinLay (HeinZawHtet) says:

     June 12, 2011 at 7:13 PM

     နဲ့ IE version ကို Define လုပ်ပေးလို့ရတယ်ဗျ

     Reply
     • HeinLay (HeinZawHtet) says:

       June 12, 2011 at 7:15 PM

       ကျန်ခဲ့တာ

       Reply
4. K says:

   June 8, 2011 at 9:17 PM

   ဒါဆိုလည်းဗျာ .. Box တစ်ခုထဲထည့်ရေးထားပေါ့။

   Please open with Firefox to see Box-Shadows.

   Reply
5. Zayar says:

   June 15, 2011 at 8:59 AM

   Nice article Ko Nyan Lynn.

   For lower IE version you can use http://css3pie.com/. Or you can leave IE as it is without rounded corner or shadow. As long as, its’ not effecting the UX should be okay.

   you can open this website in IE and Firefox as example:
   http://css-tricks.com/the-stats-that-matter-your-sites-stats/

   Reply