Mẫu code Ribbons 5
Chia sẻ
Ribbon đứng dạng thẻ Tag
1. HTML
<h1>CSS Only Ribbon</h1>
<div>
<p>You can make it <a href="#" class="grow">grow</a> or <a href="#" class="shrink">shrink</a>
</p>
</div>
<div class="ribbon">
<i><span><s></s>Just CSS<s></s></span></i>
</div>
2. CSS
@import url(https://fonts.googleapis.com/css?family=Kite+One);
@import url(https://fonts.googleapis.com/css?family=Bitter:400,700);
*, *:before, *:after{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
-webkit-transition: .15s ease-in;
-moz-transition: .15s ease-in;
}
html, body{
min-height: 100%;
}
body{
background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/subtle_carbon.png);
padding-top: 2em;
font-family: 'Bitter', serif;
}
h1{
color: #ccc;
font-size: 2.5em;
margin-bottom: .5em;
text-align: center;
text-shadow: 0.0625em 0.0625em 0.0625em #666;
}
p{
text-align: center;
color: #ccc;
margin-bottom: 2em
}
p a{
color: #666;
}
/*ribbon css */
.ribbon{
margin: 3em;
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center top, circle farthest-side, #FF0000 0%, #990000 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center top, circle farthest-side, #FF0000 0%, #990000 100%);
/* Opera */
background-image: -o-radial-gradient(center top, circle farthest-side, #FF0000 0%, #990000 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center top, 0, center top, 487, color-stop(0, #FF0000), color-stop(1, #990000));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center top, circle farthest-side, #FF0000 0%, #990000 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-side at center top, #FF0000 0%, #990000 100%);
width: 5em;
height: 10em;
position: relative;
border-top-right-radius: .2em;
border-top-left-radius: .2em;
margin: auto;
font-family: 'Kite One', sans-serif;
}
.ribbon i{
width: 90%;
height: 120%;
display: block;
margin: auto;
z-index: 100;
position: relative;
border-right: dashed 0.0625em #333;
border-left: dashed 0.0625em #333;
overflow: hidden;
}
i span{
color: #FFF;
display: block;
text-align: center;
top: 50%;
margin-top: -2em;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
position: relative;
text-shadow: 0.0625em 0.0625em 0.0625em #333;
font-style: normal;
font-weight: bold;
}
s{
width: 0.625em;
height: 0.625em;
background: #333;
top: 50%;
margin-top: -0.3125em;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
display: block;
position: absolute;
opacity: .5;
}
s:nth-of-type(1){
margin-left: -1.25em;
left: 0;
}
s:nth-of-type(2){
right: 0;
margin-right: -1.25em;
}
.ribbon:before{
content: "";
position: absolute;
bottom: -2.4em;
left: 0;
width: 0;
height: 0;
border-top: 2.5em solid #990000;
border-right: 2.5em solid transparent;
}
.ribbon:after{
content: "";
position: absolute;
bottom: -2.4em;
right: 0;
width: 0;
height: 0;
border-top: 2.5em solid #990000;
border-left: 2.5em solid transparent;
}
3. JAVASCRIPT
$('.grow').on('click', function(){
$('.ribbon').css({
fontSize: '+=5px'
});
});
$('.shrink').on('click', function(){
$('.ribbon').css({
fontSize: '-=5px'
});
});
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.