Hướng dẫn star background css - sao nền css

Question

Nội dung chính Show

Parallax Pixel Stars
Gradient Background Animation
Frosted Glass Effect
Shooting Star
Tri Travelers
Animated Background Header
Zero Element: DeLight
Glowing Particle Animation
Background Image Scroll Effect
Multiple Background Image Parallax
Bokeh Effect
Calm Breeze Login Screen
Effect Text Gradient
Star rating CSS
Kết luận

Đã đăng vào thg 9 20, 2019 9:08 SA 1 phút đọc 1 phút đọc

Với CSS bạn có thể tạo ra các hiệu ứng rất đẹp và thú vị khi kết hợp với HTML và JavaScript, hoặc ngay cả khi chỉ có mình nó, CSS hỗ trợ rất nhiều trong việc thiết kế giao diện. Bạn sẽ ngạc nhiên về những gì các nhà phát triển có thể tạo ra.

Từ các hình ảnh động cuộn đơn giản đến các background phức tạp được xây dựng hoàn toàn bằng CSS, những hiệu ứng này có thể làm trang web của bạn trơ nên lung linh và sáng tạo hơn.

Hôm nay tôi đã thu thập được 14 CSS rất tuyệt vời.

Parallax Pixel Stars

Gradient Background Animation

Frosted Glass Effect

Shooting Star

Tri Travelers

ColorDrops

Animated Background Header

Zero Element: DeLight

Glowing Particle Animation

Background Image Scroll Effect

Multiple Background Image Parallax

Bokeh Effect

Effect Text Gradient

Cảm ơn các bạn đã đọc ! Hi vọng sẽ giúp bạn trong công việc

Tham khảo: 1stwebdesign

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.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ị

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

0 để mix các màu giữa div và ⭐.

Sử dụng

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

2 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

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

3 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

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

4 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ủ

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

5. 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

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

2 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

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

5 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

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

9 thay vì

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

0, đó chính là vì khi sử dụng

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

2 nó sẽ trộn màu của các phần tử mà

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

5 phủ lên. Nếu sử dụng

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

0 kết quả sẽ không chính xác.

Vì chúng ta có

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

4 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ề

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

4 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 😊.

programming css Star background CSS Background CSS Linear-gradient trong CSS Màu background

Hướng dẫn star background css - sao nền css

Parallax Pixel Stars

Gradient Background Animation

Frosted Glass Effect

Shooting Star

Tri Travelers

ColorDrops

Animated Background Header

Zero Element: DeLight

Glowing Particle Animation

Background Image Scroll Effect

Multiple Background Image Parallax

Bokeh Effect

Calm Breeze Login Screen

Effect Text Gradient

Star rating CSS

Kết luận

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội