CSS3 နဲ့ အသည်းပုံလေး လုပ်ရအောင်
ကျွန်တော်တို့ ဒိတစ်ခါတော့ လွယ်လွယ်လေးနဲ့ လူတိုင်းလိုက်လုပ်လို့ ရတဲ့ tutorial လေးတစ်ခုရေးလိုက်ပါတယ်။ Valentine အမှတ်တရ CSS3 ကိုသုံးပြီး အသည်းပုံလေး တစ်ခုလုပ်မှာဖြစ်ပါတယ်။ လွယ်ပါတယ်။ ဒါပေမယ့် firefox မှာပဲအလုပ်လုပ်မှာဖြစ်ပါတယ်။ အရင်ဆုံးကျွန်တော်တို့ အခြေခံ HTML coding လေးတွေရေးလိုက်ကြရအောင်။
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3 heart </title> </head> <body> </body> </html>
ပြီးရင်တော့ body tag ဖြစ်တဲ့ <body> နဲ့ </body> ကြားမှာ div တစ်ခုအနေနဲ့ <div id=”heart”></div> ကိုထည့်ပေးရပါမယ်။ အောက်ကလိုပေါ့။
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3 heart </title> </head> <body> <div id="heart"></div> <!-- end of heart --> </body> </html>
ပြီးရင်တော့ ကျွန်တော်တို့ style အနေနဲ့ CSS ထဲမှာရေးရမှာဖြစ်ပါတယ်။ အလွယ်ပဲ internal အနေနဲ့ရေးလိုက်ကြတာပေါ့။
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3 heart </title>
<style type="text/css">
#heart{
width: 0;
height: 0;
border-color: red;
border-style: dotted;
border-width: 0 80px 80px 0;
margin:50px auto;
-moz-transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="heart"></div> <!-- end of heart -->
</body>
</html>
အနီနဲ့ရေးထားတဲ့ coding လေးတွေက CSS ကို internal အနေနဲ့ရေးတာပါ။ width တွေ height တွေကို 0 ထားတာက CSS3 အနေနဲ့ ကစားမှာမို့လို့ရေးတာဖြစ်ပါတယ်။ ပြီးတော့ border ကိုလည်း dotted အနေနဲ့ထားပါတယ်။ border-width က value အနေနဲ့ ကြိုက်သလောက်ထားလို့ ရပါတယ်။ များများထားရင် ကြီးကြီးပေါ်ပါမယ်။ border-width ကို width:0 0 80px 80px လို့ ပြောင်းပေးလို့ရပါတယ်။ ကွာမှာက ဘယ်စောင်း နဲ့ ညာစောင်းပဲကွာမှာပါ။ ပြီးတော့မှ အောက်က -moz-transform နဲ့ လှည့်လိုက်တာပါ။ 0 0 80 80 ထားရင်တော့ transform rotate ကို -45deg ထားပေးရပါမယ်။ နို့မိုဆိုရင် ဘေးစောင်းအနေနဲ့ ပေါ်နေမှာပါ။
အဲဒါပြီးသွားရင်တော့ tutorial ပြီးသွားပါပြီ။ ကျန်တာကတော့ စမ်းပြီးကလိကြည့်ပါ။ အားလုံးပဲ ပျော်ရွင်တဲ့ Valentine ဖြစ်ပါစေဗျာ။
Facebook comments:
