Advanced CSS3
CSS3 ကို ခုဆိုရင် browser တော်တော်များများမှာ စတင်အလုပ်လုပ်ပါပြီ။ HTML5 နဲ့ CSS3 ထွက်ပေါ်လာတဲ့ အတွက် အရင်က အချိန်ကုန် coding တွေ အများကြီးရေးပြီး flash တွေ Photoshop တွေနဲ့ ရေးဆွဲခဲ့ရတဲ့ web page design တွေကို HTML5/CSS3 တို့နဲ့ အစားထိုး လာနိုင်ပါပြီ။
Tutorial လေးစမ်းရေးကြည့်ရအောင်၊ ဖိုင်နှစ်ဖိုင် လိုပါမယ်။ တစ်ဖိုင်ကတော့ index.html ပါ။ နောက်တစ်ဖိုင်ကတော့ style.css ပါ။ တစ်ခုသတိထားဖို့ လိုတာက ခု Tutorials ကို မြင်ချင်တယ်ဆိုရင် IE သုံးလို့ မရပါဘူး။ Firefox, Safari စတာတွေ သုံးဖို့ လိုပါတယ်။
index.html ထဲာမှာ အောက်မှာ ပေးထားတဲ့ Code ကို ရေးပါ။
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="box"> <a href="#" class="button">CSS3 Button</a> </div> </body> </html>
ပြီးရင် style.css မှာ အောက်မှာပေးထားတဲ့ code ကို ကူးပါ။
.button {
display: inline-block;
background-color: orange;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 50px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
#box {
padding: 50px;
}
အဲဒီအတိုင်း Run ကြည့်ရင် အောက်မှာ ပြထားတဲ့ ပုံအတိုင်း ရပါလိမ့်မယ်။
Normal CSS Button
Box shadow
အပေါ်က ပေးထားတဲ့ CSS ထဲက .button { ….. } ထဲမှာ အောက်မှာ ပေးထားတဲ့ Code ကို ကူးထည့်လိုက်ပါ။
-webkit-box-shadow: 0 10px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 10px 10px rgba(0,0,0,.2); box-shadow: 0 10px 10px rgba(0,0,0,.2);
ဘာဖြစ်လို့ သုံးခုတောင် ရေးပေးရတာလဲလို့ မေးစရာ ရှိပါတယ်။ -webkit က safari အတွက်ပါ။ ကျန်တာတွေ ကတော့ ကျန်တဲ့ Browser တွေအတွက် ဖြစ်ပါတယ်။ ဘယ်နေရာမှာ ဖြစ်ဖြစ် ပြနိုင်အောင် သေချာအောင် ရေးတဲ့ သဘောပါ။ ထွက်လာမယ့် Result ကတော့
CSS3 Button with Shadow
Round Border
ဒီတစ်ခါ Rounded Border ဖြစ်အောင် ဆက်ရေးကြည့်ပါမယ်။ အပေါ်မှာ ရေးလိုက်တဲ့ CSS Code ရဲ့ နောက်မှာ အောက်မှာ ပေးထားတဲ့ Code ကို ထပ်ဖြည့် လိုက်ပါ။
-webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em;
ထွက်လာမယ့် Result ကတော့ အောက်မှ ပြထားတဲ့ အတိုင်းပါပဲ။ border တွေကို ကွေးကွေး ၀ိုင်းဝိုင်းလေး ပေါ်ချင်ရင် သုံးတာပါ။
CSS3 Button with shadow and rounded corner
Text shadow
ဒါလေးကတော့ text တွေမှာ shawdow လေးတွေပေါ်ချင်ရင် သုံးတာပါ။ အောက်မှာ ပေးထားတဲ့ Code ကို ပေါင်းထည့်လိုက်ပါဦး။
text-shadow: 0 1px 1px rgba(0,0,0,.3);
ထုံးစံအတိုင်း Result ကို ကြည့်ကြည့်ရအောင်
CSS3 Button with shadow, rounder corner and text shadow
Transform
rotate
ဒါလေးကတော့ Box တွေကို လှည့်ချင် ကြီးချင်ရင် သုံးတာပါ။ ထုံးစံအတိုင်း Code ကို ကူးထည့်လိုက်ပါဦး။
-moz-transform:rotate(45deg); -webkit-transform: rotate(45deg);
၄၅ ဒီဂရီဆို ဒီလိုလေးပေါ်ပြီး ၉၀ဒီဂရီ ဆိုရင်တော့ ဒေါင်လိုက်လေးပေါ်မှာပါ။ ၄၅ ဒီဂရီရဲ့ ပုံစံကတော့ အောက်မှ ပြထားတဲ့ အတိုင်း ဖြစ်ပါတယ်။
CSS3 with transform
Skew
ဒါကတော့Box ကို skew လုပ်ပေးတဲ့ code လေးပါ။ ပုံလေးကြည့်ရင် ပိုရှင်းမယ် ထင်ပါတယ်။ လိုချင်တဲ့ ပုံအချိုးအစား ရအောင် ဒီဂရီတွေကို ကစားပေးလိုက်ရင် ရပါပြီ။ ဒီတစ်ခါတော့ rotate ဆိုတဲ့ နေရာမှာ skew လို့ ပြင်ပါမယ်။ ထွက်လာတဲ့ Result ကတော့
CSS3 Button with skew
Scale
ဒါကတော့ အကြီးအသေး ပြောင်းလို့ရတဲ့ စနစ်ပါ။ rotate, skew တို့လိုပဲ scale လို့ သုံးပါတယ်။ ဒါပေမယ့် နောက်မှာ ပေးတဲ့ variable ကတော့ မတူတော့ပါဘူ။ .5 ဆိုရင် တစ်ဝက် ဖြစ်သွားပြီ။ 1.5 ဆိုရင် ပိုပြီးလာမှာ ဖြစ်ပါတယ်။ .5 နဲ့ စမ်းထားတာကတော့ Code အနေနဲ့ဆိုရင်
-moz-transform:scale(.5); -webkit-transform: scale(.5);
ရလာတဲ့ Result မှာတော့ တစ်ဝက်စာပဲ ရှိတော့မှာ ဖြစ်ပါတယ်။
CSS3 Button with scale .5
Design ပေါ်မှာ အမြင်ရှိပြီး ထွင်းဖောက်နိုင်တဲ့ designer တယောက်အတွက်တော့ ဒီ CSS3 ရဲ့ code လေးတွေကြောင့် အလျင်မြန်နဲ့ပဲ လှပတဲ့ design လေးတွေထွက်ပေါ်လာမယ်လို့ ယုံကြည်ပါတယ်။
Facebook comments:
7 Responses
Leave a comment
About the Author
ahkeno
The one who love opensource, php, css, js, jquery, pyhon and happy in writing code. Another hobby love in teaching and learning. Got Master degree from UCSY. follow me on twitter@ahkeno My blog Ahkeno.com
Ads
အစ်မ CSS3 file ကို external အနေနဲ့သိမ်းချင်ရင် .css နဲ့ပဲ သိမ်းရမှာလား ကျွန်တော် လဲ CSS ကိုစိတ်ဝင်စားတော့ အခုလို ရေးပေးတာ ကျေးဇူးတင်ပါတယ်။
နောင်လဲ များများရေးပေးပါအုန်းနော်။
ဟုတ်ကဲ့.. external ဆိုလဲ .css နဲ့သိမ်းရတာပါပဲ..
Very thanks , sis
CSS3 Button
CSS3 Button
CSS3 Button
CSS3 Button
CSS3 Button
Button ၅ခုအစဉ်လိုက်ပေါ်ချင်လို့ index.html ဖိုင်မှာအဲလိုမျိုးသုံးလိုက်ကြည့်တယ်။
Button တွေက gap ဖြစ်နေတယ်။
ကပ်ကပ်လေးထားချင်ရင်ဘယ်လိုပြင်ရမလဲမသိဘူးနော်။
css မှာလား? html မှာလား?ဘယ်လိုပြင်ရမလဲ?…ရှင်းလင်းချက်လေးကောအဆစ်ပေးအုံးနော်….
ဟီးဟီး…အကုန်သာရေးပေးပါတော့….နောက်မှကော်ဖီလိုက်တိုက်မယ်နော်….
Thanks
Button တွေကို အတန်းလိုက်ပေါ်ချင်ရင်တော့ css ကို internal မှာသိမ်းရပြီး css ကိုပြင်ပေးရုံနဲ့ရပါတယ်။ပြီးရင် button တွေရဲ့ class နာမည်ကိုတူအောင်ထားပြီး Padding နဲ့ float ကိုလိုသလိုကစားပေးလိုက်ရင်ရပါတယ်။ မရှင်းတာရှိရင်ထပ်မေးလို့ရပါတယ်။..
[...] Dive Into HTML5 နဲ့ Advanced CSS3 မှာ အသေးစိတ် [...]
[...] Dive Into HTML5 နဲ့ Advanced CSS3 မှာ အသေးစိတ် [...]