Rounding Corners With CSS3 : border-radius.

Web Design မှာ navigation bar မှာပဲ ဖြစ်ဖြစ်  content area မှာပဲ ဖြစ်ဖြစ် block တွေရဲ့ corner တွေကို လေးထောင့်ကျကျထားတာထက် နည်းနည်းလေး ဝိုင်းထားတာက ကြည့်ရတာ ကျွန်တော်အမြင်မှာ ပိုပြီး အဆင်ပြေတယ်လို့ ထင်တယ်။ အရင် css version တွေ တုန်းက nested div တွေသုံးရတယ်။ ဒေါင့်အဝိုင်းလေးတွေကိုလည်း ၄ခုလောက်ဖြတ်ထားရပါတယ်။ ဒါကိုမှ div tag ထဲမှာ nested လုပ်ပြီး ထည့်ရပါတယ်။ အဆင့်တွေပိုများသလို ပိုလည်း ရှုပ်ပါတယ်။

CSS3 မှာ border-radius property က ဒါတွေကို ကူညီပေးပါလိမ့်မယ်။ အဲဒီ property တစ်ခုတည်းနဲ့ အဆင်ပြေသွားပါတယ်။

CSS 3 မှာ border-radius ၄မျိုးရေးလို့ရပါတယ်။

  1. border-top-left-radius
  2. border-top-right-radius
  3. border-bottom-left-radius
  4. border-bottom-right-radius

တို့ပဲ ဖြစ်ပါတယ်။ ဒါတွေကို border-radius ထဲမှာလည်း အားလုံးပေါင်းရေးလိုက်လို့ရပါတယ်။ ဒါဆို example တွေ လုပ်ကြည့်ရအောင်။

ဒါဆို border-radius ကို အရင်လုပ်ကြည့်ရအောင်ပါ။ border-radius မှာ value ၂ ခုထည့်နိုင်ပါတယ်။ ပထမ value က horizontal radius ကို ကိုယ်စားပြုပြီး ဒုတိယ value က vertical value ကို ကိုယ်စားပြုပါတယ်။value တွေကို length နဲ့ % ၂မျိုးသတ်မှတ်နိုင်ပါတယ်။  ဒါဆို အောက်က code ကို ကြည့်ရအောင်။

#block{
border-radius:15px;
background:#070;
padding:15px;
}

ဒါက css id selector code လေးပါ။  background ထည့်တာကတော့ block ကို ပေါ်လွင်စေချင်လို့ပါ။ ဒါကို html page မှာ ထည့်ပါမယ်။


This is rounded corner

ခုနက css code ကို external css file အနေနဲ့ သိမ်းထားခဲ့မယ်ဆိုရင် ဒီ page မှာ အဲဒီ ဖိုင်ကို link ပြန်ယူပေးရပါမယ်။ ဒါဆို result ကို ကြည့်ရအောင်။

This is rounded corner

ကျွန်တော်က border-radius ကို value တစ်ခုပဲ ထည့်ထားတာပါ။ ဒါဆို corner လေးဘက်လုံးရဲ့ radius ကို 15px ပဲ ယူသွားတာပါ။ horizontal radius နဲ့ vertical radius ကို ခွဲခြားသတ်မှတ်လို့လည်း ရပါတယ်။

border-radius : 10px 15px;

ဒါဆို လေးဘက်လုံးရဲ့ radius ၂ခုကို 10px and 15px လို့ သတ်မှတ်လိုက်တာပါ။  horizontal value 10px ဖြစ်ပြီးတော့  vertical value 15px ဖြစ်ပါတယ်။ သင့်အနေနဲ့ value တစ်ခုခုကို 0 သတ်မှတ်လိုက်ရင် rounded corner ဖြစ်မှာ မဟုတ်ပါဘူး။

corner တစ်ခုချင်းစီရဲ့ radius တွေကိုလည်း သီးခြား သတ်မှတ်ပေးလို့ရပါတယ်။


#block{
border-radius:10px 12px 15px 10px/10px 12px 15px 10px;
background:#070;
padding:15px;
}

ပထမ value ၄ခုက corner ၄ခုလုံးရဲ့ horizontal radius ကို ကိုယ်စားပြုပြီး  ဒုတိယ value လေးခုက vertical value လေးခုကို ကိုယ်စားပြုပါတယ်။ value တွေက border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius ဆိုပြီး အစီစဉ်အတိုင်း ထည့်ပါတယ်။ bottom-left value ကို မထည့်ခဲ့ရင် top-left ရဲ့ value အတိုင်းယူပြီးတော့ bottom-right value ကို မထည့်ခဲ့ရင် top-right value ကို ယူပါမယ်။

corner တစ်ခုချင်းစီရဲ့ radius တွေကိုလည်း ဒီအတိုင်းပါပဲ။ သင့်အနေနဲ့ value ၂မျိုးထည့်နိုင်သလို ၁မျိုးထဲလည်း ထည့်နိုင်ပါတယ်။ value ၂မျိုးဆိုရင်  horizontal and vertical radius ကို ယူပြီးတော့ ၁မျိုးတည်းဆိုရင်တော့  အားလုံးကို အဲဒီ တန်းဖိုးအတိုင်းပဲ ယူပါတယ်။

Example 2


#A{
border-top-left-radius:15px;
background:#070;
width:100px;
height:70px;
padding:15px;
}

#B{

border-top-right-radius:35px 50px;
background:#070;
width:100px;
height:70px;
padding:15px;

}

#C{

border-bottom-right-radius:60px 30px;
background:#070;
width:100px;
height:70px;
padding:15px;

}

#D{

border-bottom-left-radius:5em;
background:#070;
width:100px;
height:70px;
padding:15px;

}

#E{

border-radius:1em 2em 1em 2em;
background:#070;
width:150px;
height:70px;
padding:15px;

}

ဒါဆို ကျွန်တော် example တွေနဲ့ ဒီပို့စ် ကို အဆုံးသတ်လိုက်ပါတယ်။ ကျွန်တော်ကိုယ်တိုင်ကလဲ HTML 5 CSS 3 ကို ခုမှ စလေ့လာခါစ ဆိုတော့ အမှားအယွင်းရှိနိုင်ပါတယ်။ ထောက်ပြကြပါဦး။

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: