CSS 3 ဖြင့် 3D Ribbon လေးတစ်ခုလုပ်ကြည့်ကြရအောင်
CSS 3 ကိုသုံးပြီး 3D Ribbon လေးတစ်ခုလိုက်လုပ်ကြည့်ကြရအောင်။ ကဲ tutorial လေးစလိုက်ကြရအောင်။
အခု ဒီလိုပုံစံလေးပေါ် ဖို့အတွက် html file လေးတစ်ခုကိုအရင်ရေးကြရအောင်။
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3 Ribbon</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="container">
<div id="menu"></div>
<div id="bubble">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
အပေါ်က ပုံလေးအတွက် css3 file လေးပါ။
body{
background: #000;
}
#container{
margin: 50px auto 0px auto;
width: 400px;
height: 350px;
}
#bubble{
position: relative;
width: 350px;
height: 350px;
background: #333;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 0 1px #cfcec9;
-khtml-box-shadow: 0 0 1px #cfcec9;
-webkit-box-shadow: 0 0 1px #cfcec9;
z-index: 90; /* the stack order: foreground */
}
နောက်တပိုင်း အတွက်ဆက်ရေးကြရအောင်…
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3 Ribbon</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="container">
<div id="menu"></div>
<div id="bubble">
<div>
<h2>CSS3 Ribbon</h2>
</div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
css file အတွက်ပါ။
.rectangle {
background: #ffd65e; /* Old browsers */
background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /*Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */
height: 50px;
width: 380px;
position: relative;
left:-15px;
top: 30px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100; /* the stack order: foreground */
}
.rectangle h2 {
font-size: 30px;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px #cfcec9;
text-align: center;
}
.triangle-l {
border-color: transparent #ffd65e transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 65px;
z-index: -1; /* displayed under bubble */
}
.triangle-r {
border-color: transparent transparent transparent #ffd65e;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 350px;
top: 35px;
z-index: -1; /*displayed under bubble */
}
class info အတွက် html tag ပါ။
<div>
<h2>I Have Used Only CSS3.</h2>
<p>
I have used some new properties of the CSS3.
You can realize a nice effect
using only css, it's really fantastic.<br /><br />
<a href="#">Go to the tutorial!</a>
<span>Posted By: <i><a href="#">SS</a></i></span>
</p>
</div>< !-- end of info -- >
class info အတွက် css file ပါ။
/***** Start the class info *****/
.info { padding: 60px 25px 35px 25px;}
.info h2 { font-size: 20px; color: #fff; }
.info p { padding-top: 10px; font-size: 14px; line-height: 22px; color: #fff;}
.info p a { color: #95f854; text-decoration: none;}
.info p a:hover { text-decoration: none; color: #ff0000;}
.info p span{ float: right; font-style: italic;}
/*****End the class info *****/
menu အတွက်ဆက်ပြီးရေးကြရအောင်ပါ။
menu ရဲ့ html ပါ
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- end of menu-->
menu ရဲ့ css file ပါ
/*****Start of Menu *****/
#menu {
position: relative;
width: 400px;
height: 49px;
top:3px;
left: 50px;
z-index: 80; /* the stack order: foreground */
}
#menu ul li {
-webkit-transform: rotate(-45deg); /* rotate the list item */
-moz-transform: rotate(-45deg); /* rotate the list item */
width: 65px;
overflow: hidden;
margin: 10px 0px;
padding: 5px 5px 5px 18px;
float: left;
background: #700979;
text-align: center;
}
#menu ul li a {
color: #fff;
text-decoration: none;
display:block;
}
#menu ul li.l1 {
background: #700979;
}
#menu ul li.l1:hover {
background: #bb34c7;
}
#menu ul li.l2 {
background: #cc0000;
}
#menu ul li.l2:hover {
background: #fb0808;
}
#menu ul li.l3 {
background: #d2ff52; /* Old browsers */
background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #d2ff52 0%,#91e842 100%); /* W3C */
}
#menu ul li.l3:hover {
background: #97ca05;
}
#menu span {
margin: 12px 60px 0px 0px;
float:right;
color: #fff;
}
/***** End of Menu *****/
ဒီ tutorial ကို ie မှာ စမ်းရင်တော့အဆင်မပြေနိုင်ပါဘူး။ border-radius နဲ့ transform property တွေက ie မှာအလုပ်မလုပ်ပါဘူး။ boilerplate လေးထည့်ပြီး စမ်းရင်တော့ browser အားလုံးမှာအဆင်ပြေနိုင်ပါတယ်။ နောက်လည်း ကြိုးစားပြီးဆက်ရေးပါအုံးမယ်….
Facebook comments:
One Response
Leave a comment
About the Author
Ads
very thanks for your sharing!!!!
May you be success !