Share Tạo nền chuyển sắc với hiệu ứng Background Gradient

filiallion · 05/08/2018

Trước đây có lẽ mọi thứ liên quan đến background các bạn đều phải nhờ tới sự trợ giúp của Photoshop, nhưng trong thiết kế web hiện đại ngày nay thì việc tối ưu thiết kế là quan trọng nên những gì có thể không cần dùng tới hình ảnh thì các bạn nên làm, điều này không những làm website của các bạn nhẹ, giảm được băng thông mà mã nguồn của các bạn cũng thân thiện hơn.

Bài viết này tôi sẽ giới thiệu một thuộc tính CSS3 đang được sử dụng rộng rãi trong thiết kế web hiện đại ngày nay, đó là Background Gradient (Thay đổi biên độ màu nền). Chỉ với vài thuộc tính CSS các bạn có thể tạo được màu nền chuyển sắc thay vì phải cắt một hình nền trong Photoshop, đây là một thuộc tính rất hay của CSS mà các bạn có thể áp dụng được trên rất nhiều trình duyệt khác nhau.

Các bạn tham khảo ví dụ với nội dung mã lệnh CSS như sau:

CSS:

.background-gradient {
    height: 100px;
    background: #004c89;
    background: linear-gradient(#004c89, #0062af);
    background-repeat: repeat;
    background-size: 100% 200%;
    transition: all 0.3s linear;
}

Và kiểm tra với dòng mã lệnh HTML như sau:

HTML:

<div class="background-gradient"></div>

Share Tạo nền chuyển sắc với hiệu ứng Background Gradient

filiallion

Administrator