Mẫu code Ribbons 5

Chia sẻ

---

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'
  });
});

---