Shadows (အရိပ်များ)

Box Shadow

Element တစ်ခုလုံးကို အရိပ်ချတာပါ။ တန်ဖိုး (၄) ခု နဲ့ အရောင် လိုပါတယ်။ offset-x (ဘယ်ညာ), offset-y (အပေါ်အောက်), blur-radius (ဝါးမယ့်ပမာဏ), spread-radius (အရိပ်အရွယ်အစား - Optional)

.card {
  /* x-offset, y-offset, blur, color */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 5px;
}

5px (x): ညာဘက်ကို 5px ရွေ့မယ်။
5px (y): အောက်ဘက်ကို 5px ရွေ့မယ်။
10px (blur): အရိပ်ကို ဝါးဝါးလေး ဖြစ်စေမယ် (ဒါမှ သဘာဝကျမှာပါ)။
rgba(…): အရောင် (အမည်းရောင်ကို Opacity 0.2 နဲ့ သုံးတာ ပိုလှပါတယ်)။

Text Shadow (စာလုံး အရိပ်)

စာသားတွေကို အရိပ်ချတာပါ။ ခေါင်းစဉ်ကြီးတွေမှာ သုံးရင် လှပါတယ်။

h1 {
  text-shadow: 2px 2px 4px #000000;
}