Mẫu code Ribbons 11
Chia sẻ
Ribbon Wrapped Around Ellipse
1. HTML
<div id="container" class="section">
<div id="header">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/104005/OC_logo2.png" alt "Orange Cupboard Jelly Company"></a>
</div>
<div id="ribbon">
<div id="nav">
<ul class="nav">
<li class="flavors"><a href="#">About</a></li>
<li class="locations"><a href="#">Flavors</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
2. CSS
* {
margin: 0px;
padding: 0px;
}
html {
width: 100%;
height: 100%;
text-align: center;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/104005/Plaid_bkg_blue.png");
}
#container {
position: relative;
margin: 0 auto;
width: 950px;
padding: 20px;
}
#header {
position: relative;
min-height: 150px;
text-align: center;
padding: 10px;
}
#header img {
max-width: 355px;
postion: relative;
}
#ribbon {
background-color: #47c7f0;
width: 335px;
padding: 10px;
position: relative;
margin-top: -88px;
margin-left: auto;
margin-right: auto;
font-family: 'Shadows Into Light Two', cursive;
font-size: 20px;
letter-spacing: 2px;
color: #ffffff;
text-align: center;
box-shadow: 0 2px 6px #999999;
}
/*Ribbon Ends*/
#ribbon:before,
#ribbon:after {
content: "";
width: 3px;
bottom: 18px;
position: absolute;
display: block;
border: 25px solid #47c7f0;
box-shadow: 0 8px 6px -6px #999999;
z-index: -2;
}
/*Left Ribbon End*/
#ribbon:before {
left: -42px;
border-right-width: 35px;
border-left-color: transparent;
}
/*Right Ribbon End*/
#ribbon:after {
right: -42px;
border-left-width: 35px;
border-right-color: transparent;
}
/*Wrap*/
#nav:before,
#nav:after {
content: "";
bottom: 44px;
position: absolute;
display: block;
border-style: solid;
z-index: -1;
}
/*Left Ribbon Wrap*/
#nav:before {
left: 0;
border-width: 0px 0px 20px 20px;
border-color: transparent transparent #3497b5 transparent;
}
/*Right Ribbon Wrap*/
#nav:after {
right: 0;
border-width: 20px 0px 0px 20px;
border-color: transparent transparent transparent #3497b5;
}
/*Nav Styles*/
#nav ul {
width: 100%;
list-style: none;
margin: 0px;
text-align: center;
}
#nav li {
display: inline;
padding: 10px;
}
#nav a {
text-decoration: none;
color: white;
text-align: center;
}
#nav a:hover {
color: navy;
}
3. JAVASCRIPT
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút Chia sẻđể mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.