CSS3 Image Reflection
အခုနောက်ပိုင်း ပုံလေးတွေမှာ reflection တွေ ထည့်ထည့်ပီး သုံးလာတာ စတိုင် တစ်ခုလို ဖြစ်နေပါပီ။ အရင်ကတော့ Photoshop တို့လို Image Editing software သုံးပီး reflection effect ထည့်ပီးသား ပုံတစ်ခုလုံး သုံးခဲ့ရပါတယ်။ အခု CSS3 မှာတော့ css code နဲ့တင် လုပ်လို့ရသွားပါပြီ။ ပုံတိုင်းအတွက် reflection effect လိုက်ထည့်စရာ မလိုတော့ဘူးပေါ့ဗျာ။ ကျွန်တော်တို့ MyanmarTutorials ကိုလည်း Webkit browser (Safari, Chrome, … ) တို့နဲ့ ကြည့်ရင် Post Thumbnail image တွေမှာ reflection ပါတာကို တွေ့ရမှာပါ။
အခု CSS3 နဲ့ reflection effect ထည့်တာကို လေ့လာကြည့်ပါမယ်။ လောလောဆယ်တော့ webkit browser တွေမှာပဲ အလုပ်လုပ်ပါသေးတယ်။ cross-browser ရဖို့လဲ ဆက်ပြောသွားပါမယ်။ sample page လေး ဆောက်မယ်။ ကျွန်တော် 200px x 200px ပုံကို သုံးထားပါတယ်။
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Reflection</title>
<style type="text/css">
img {
float: left;
margin: 0 20px 0 0;
}
</style>
</head>
<body>
<h2>MMTuts is Cool!</h2>
<img src="reflect-img.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
reflection ရဖို့အတွက် -webkit-box-reflect property ကို သုံးရပါမယ်။ img အတွက် css မှာ အောက်က အတိုင်း လိုတာ ထပ်ဖြည့်ရေးလိုက်ပါ။
<style type="text/css">
img {
float: left;
margin: 0 20px 0 0;
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));
}
</style>
ပုံရဲ့ Size အတိုင်း reflection ရပါပီ။ box-reflect ရဲ့ below ဆိုတာက reflection ရဲ့ direction ကိုပြောတာပါ။ 4px ကတော့ မူရင်းပုံနဲ့ ဘယ်လောက် အကွာမှာ စမယ်ပေါ့။ နောက်က gradient ကတော့ transparent ကနေ အဖြူကို သွားထားပါတယ်။ ဒါမှာ ပုံကို မြင်နေရာကနေ background ထဲကို fade လုပ်သွားမှာ ဖြစ်ပါတယ်။ reflection size က ကြီးနေတော့ စာတွေပေါ်မှာ ထပ်ကုန်ပါတယ်။ အဲဒါကို ညှိရပါမယ်။ color-stop ထည့်ပေးရပါမယ်။
<style type="text/css">
img {
float: left;
margin: 0 20px 0px 0;
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.8, transparent), to(white));
}
</style>
color-stop(.8, transparent) က gradient ရဲ့ 80% ထိပဲ transparent ယူမယ်လို့ ပြောတာပါ။ ကျွန်တော်တော့ reflection size ကို ဒီလောက်ဆို သဘောကျပါပီ။ ဒါပေမယ့် စာနဲ့ ထပ်နေသေးတယ်။ အဲဒါကတော့ image ရဲ့ margin-bottom ကို တိုးလိုက်ရင် အဆင်ပြေပါတယ်။
<style type="text/css">
img {
float: left;
margin: 0 20px 40px 0;
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.8, transparent), to(white));
}
</style>
ကဲ CSS3 နဲ့ reflection လုပ်တာကတော့ ဒါပါပဲ။ တန်ဖိုးလေးတွေ နည်းနည်း ပြောင်းပြီး စမ်းကြည့်ကြပါ။
img {
float: left;
margin: 0 20px 0 0;
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));
}
</style>
Facebook comments:
One Response
Leave a comment
About the Author
Goo Goo
ေန႔နဲ႔ည မွားေနေသာ လူတစ္ပိုင္း ဇီးကြက္တစ္ပိုင္း။ မ်က္စိႏွစ္လံုး ပြင့္တာနဲ႔ ကီးဘုတ္ေပၚ လက္ေရာက္ေနတတ္သူ။ ကြန္ပ်ဳတာ နည္းပညာမ်ား အားလံုးလိုလို စိတ္ဝင္စားေသာ္လည္း ဝဘ္ဒီဇိုင္းကို အားသန္သူ။ စိတ္ပါလွ်င္ ဂီတာတီး၊ သီခ်င္းေရးတတ္ေသာ အခ်ိန္ပိုင္း အသံဖမ္းအင္ဂ်င္နီယာ။
Ads
how can i make this in Firefox 4 pls
i guess it has sth to do with -moz .