Tạo ribbon sản phẩm bằng CSS
Trên các website trưng bày sản phẩm, để làm nổi bật một sản phẩm nào đó (ví dụ sản phẩm giảm giá, khuyến mãi, sản phẩm hot,…), người ta thường đặt ribbon lên hình ảnh sản phẩm, như ví dụ dưới đây:
Trước đây, mình thường dùng hình ảnh để tạo ribbon sản phẩm. Một thời gian dài, cách duy nhất để làm được việc này là tạo hẵn một file hình sản phẩm có kèm sẵn ribbon. Sau đó, khi CSS mạnh mẽ hơn, người ta có thể tạo một ảnh PNG trong suốt, nền ribbon nghiêng rồi định CSS cho nó float lên trên ảnh sản phẩm.
Ngày nay, với sự mạnh mẽ của CSS và sự hỗ trợ của nhiều trình duyệt mới, bạn có thể tạo ribbon sản phẩm hoàn toàn bằng HTML và CSS.
Giả sử mã HTML ô hiển thị sản phẩm của mình như sau:
<div class="product_item">
<a href="#">
<img src="img/p2.jpg" alt="">
<span>Tên sản phẩm</span>
<span>Giá</span>
</a>
</div>Bạn có thể xem thêm bài Hiển thị danh sách sản phẩm bằng CSS để biết cách tạo danh sách sản phẩm.
Để hiển thị ribbon, thêm đoạn mã HTML sau vào giữa phần tử div lớp product_item của ô sản phẩm tương ứng:
<div class="ribbon-wrapper"><div class="ribbon-red">Giảm giá</div></div>Mã hoàn chỉnh ô sản phẩm cần hiện ribbon:
<div class="product_item">
<div class="ribbon-wrapper"><div class="ribbon-red">Giảm giá</div></div>
<a href="#">
<img src="img/p2.jpg" alt="">
<span>Tên sản phẩm</span>
<span>Giá</span>
</a>
</div>Chúng ta sẽ dùng mã CSS sau để định cách hiển thị cho ribbon:
.ribbon-wrapper {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-red {
font-weight: bold;
font-size:13px;
text-transform:uppercase;
color: #fff;
text-align: center;
-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;
width: 120px;
background-color: #f53838;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f53838), to(#e10808));
background-image: -webkit-linear-gradient(top, #f53838, #e10808);
background-image: -moz-linear-gradient(top, #f53838, #e10808);
background-image: -ms-linear-gradient(top, #f53838, #e10808);
background-image: -o-linear-gradient(top, #f53838, #e10808);
color: #fff;
-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-red:before, .ribbon-red:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-red:before {
left: 0;
}
.ribbon-red:after {
right: 0;
}Trong ví dụ trên, mình đang dùng ribbon màu đỏ. Nếu muốn màu khác, bạn sửa mã màu trong đoạn dưới đây lại:
/* màu đỏ nền chủ đạo */
background-color: #f53838;
/* gradient chuyển màu ribbon từ trên xuống */
background-image: -webkit-gradient(linear, left top, left bottom, from(#f53838), to(#e10808));
background-image: -webkit-linear-gradient(top, #f53838, #e10808);
background-image: -moz-linear-gradient(top, #f53838, #e10808);
background-image: -ms-linear-gradient(top, #f53838, #e10808);
background-image: -o-linear-gradient(top, #f53838, #e10808);Bạn cũng có thể thay đổi góc nghiêng của ribbon trong đoạn mã dưới đây:
/* ribbon nghiêng 45 độ */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);Ví dụ, giả sử mình muốn hiển thị ribbon sang bên trái như hình:
Chúng ta cần sửa mã CSS định góc nghiêng trên lại thành:
/* ribbon nghiêng -45 độ */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);Ngoài ra, bạn cũng cần thêm float-right; vào sau đoạn CSS trên.
Bạn có thể tải xuống source code minh họa tại đây.
