Tạo star rating css nhanh chóng và hiển thị chính xác số sao

Star rating systems hay hệ thống đánh giá là một cách để chúng ta xem bài viết, sản phẩm,... Được bao nhiêu người đánh giá và số sao trung bình cao hay thấp, từ đó giúp ta cải thiện chất lượng bài viết tốt hơn.

Giả sử hệ thống trả về cho chúng ta một kết quả số sao trung bình là 4.28 ⭐. Làm thế nào để chúng ta hiển thị chính xác số sao này, thay vì chúng ta phải check điều kiện để hiển thị, vì các icon hay svg thường chỉ có ba kiểu là solid, half và regular.

Để xử lý vấn đề trên thì trong CSS có một thuộc tính khá hay là mix-blend-mode. Thuộc tính này giúp chúng ta pha trộn màu sắc của các đối tượng.

Ví dụ chúng ta có 2 img chồng lên nhau, khi sử dụng blend modes nó sẽ mix các colors của 2 hình với nhau và tùy vào chế độ blend modes, chúng ta sẽ được kết quả là các màu khác nhau sau khi trộn.

Sau khi chúng ta hiểu cơ bản về thuộc tính mix-blend-mode trong CSS, cùng bắt tay vào làm thử Star rating nhé 😁.

Star rating CSS

Ý tưởng của chúng ta đơn giản là chúng ta sẽ tạo một div giống như một lớp phủ lên các ngôi sao ⭐ của chúng ta. Sử dụng mix-blend-mode với giá trị color để mix các màu giữa div và ⭐.

Sử dụng mix-blend-mode: color sẽ chỉ ảnh hưởng đối với các phần tử có màu sắc.

Đầu tiên chúng ta sẽ tạo một parent có class stars chứa các star.

<div class="stars">
  <svg width="100" height="100" viewBox="0 0 940.688 940.688">
    <path d="M885.344,319.071l-258-3.8l-102.7-264.399c-19.8-48.801-88.899-48.801-108.6,0l-102.7,264.399l-258,3.8 c-53.4,3.101-75.1,70.2-33.7,103.9l209.2,181.4l-71.3,247.7c-14,50.899,41.1,92.899,86.5,65.899l224.3-122.7l224.3,122.601 c45.4,27,100.5-15,86.5-65.9l-71.3-247.7l209.2-181.399C960.443,389.172,938.744,322.071,885.344,319.071z" />
  </svg>
  ... 5 stars sẽ cần 5 svg
  <div class="overlay" style="width: 37%"></div>
</div>

Các element star mình sẽ sử dụng svg có sẵn ở trên mạng ^^. Tiếp theo ta cần tạo một lớp phủ overlay. Element này là nhân vật chính giúp chính ta hiển thị chính xác số sao ^^. Ta sẽ phủ element này lên các ngôi sao và sử dụng mix-blend-mode: color như sau:

body {
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stars {
    position: relative;
    white-space: nowrap;
}
.stars svg {
    width: 60px;
}

.overlay {
    background: #fff;
    height: 100%;
    overflow: hidden;
    mix-blend-mode: color;
    position: absolute;
    top: 0;
    right: 0;
}

svg {
    fill: gold;
}

Chúng ta sẽ để background của overlay giống với màu nền, việc còn lại cứ để mix-blend-mode lo ^^.

Kết quả chúng ta sẽ được như sau:

Có thể các bạn thắc mắc ở trên mình lại sử dụng right: 0 thay vì left:0, đó chính là vì khi sử dụng mix-blend-mode: color nó sẽ trộn màu của các phần tử mà overlay phủ lên. Nếu sử dụng left:0 kết quả sẽ không chính xác.

Vì chúng ta có % tính từ phải qua trái nên chúng ta cần một bước nữa để hiển thị chính xác số sao, chúng ta sẽ sử dụng JavaScript, PHP, React,... Để tính toán và trả về % và hiển thị số sao:

const percentage = Math.round((value / max) * 100);
document.querySelector('.overlay').style.width = `${100 - percentage}%`;

Kết luận

Như vậy là chúng ta đã hoàn thành Star rating bằng cách sử dụng mix-blend-mode trong CSS. Mong bài viết sẽ giúp ích cho các bạn ^^.

Chúc các bạn học tốt. Hẹn gặp các bạn trong các bài viết tiếp theo 😊.