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

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
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>
 
Back
Top