Cách tạo Corner Ribbons bằng CSS

Corner ribbons thường được dùng rất nhiều cho các trang bán hàng, nó giúp người dùng chú ý đến những sản phẩm hơn. Trước đây, chúng ta thường sử dụng hình ảnh để làm các ribbons, nhưng giờ đây, chúng ta đã có thể dùng CSS để tạo bất kì một Corner ribbons nào. Các bạn có thể xem hình ảnh hoặc demo bên dưới để hiểu rõ hơn về Corner ribbons.

Xem Demo | Download

HTML

Để tạo Corner Ribbons, các bạn sử dụng khung html như sau:

<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>

CSS

Và đoạn css để tạo ra hình dáng ribbons là :

.wrapper {
  margin: 50px auto;
  awidth: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

.ribbon-wrapper-green {
  awidth: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  awidth: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

Rất đơn giản phải không các bạn, mình mong là qua bài viết này, các bạn có thể sử dụng ribbons cho những trang bán hàng của mình. Và hơn nữa là các bạn sẽ có thêm một kinh nghiệm trong việc sử dụng CSS để thiết kế ra những hình dạng mà các bạn mong muốn.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster