Mẫu code Ribbons 5



Ribbon đứng dạng thẻ Tag

1. HTML

							

CSS Only Ribbon

You can make it grow or shrink

Just CSS

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 để 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.