Share Tạo các hiệu ứng màu nền với CSS3

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Trước đây các bạn thường sử dụng các hình ảnh chuyển sắc để làm nền cho website hay một thành phần nào đó trên website, nhưng như thế sẽ làm website trở nên nặng nề khi phải tải các ảnh nền này, sự nặng nề này các bạn sẽ thấy rất rõ khi số lượng ảnh nền trên website tương đối nhiều, điều này không tốt cho SEO và cả trải nghiệm người dùng. Với CSS3, hiệu ứng gradient thường được dùng để tạo các chuyển sắc màu cho nền, làm cho các màu sắc chuyển tiếp qua lại lẫn nhau một cách hài hòa giúp thay thế hoàn toàn các ảnh nền nặng nề.

Với gradient, các bạn có thể tạo ra vô số các hiệu ứng nền chỉ bằng một vài dòng lệnh CSS đơn giản. Sau đây tôi sẽ giới thiệu với các bạn mã lệnh 4 hiệu ứng nền bằng cách sử dụng gradient trong CSS3.
CSS:
.box-1 {
    width: 100%;
    height: 100vh;
    background: linear-gradient(-45deg, blue, red, yellow);
}

.box-2 {
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle, red, yellow);
}

.box-3 {
    width: 100%;
    height: 100vh;
    background: repeating-radial-gradient(circle, yellow 20%, orange 40%);
}

.box-4 {
    width: 100%;
    height: 100vh;
    background: repeating-radial-gradient(yellow 20%, orange 40%);
}
Các bạn lần lượt sử dụng 4 class CSS trên để xem hiệu ứng nền với gradient.
 
Back
Top