Trước đây chúng ta thường dùng các hình ảnh chuyển sắc để làm background cho trang trang web hay một phần trang web, nhưng như thế sẽ làm website của ta tải rất nặng điều này không tốt cho SEO và cả người dùng.
Hiệu ứng chuyển màu (Gradient) với CSS3
Hiệu ứng Gradient thường được dùng để tạo độ dốc cho ảnh, 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.

Cú pháp
1 |
background: linear-gradient(direction, color-1, color-2, color-3, color-4, ...); |
- Giá trị đơn to top hoặc to left hoặc to right hoặc to bottom thì nó sẽ kéo theo cạnh đối diện.
- Giá trị đôi ( to top left) hoặc ( to left right) nếu bạn muốn chỉ rõ kéo từ cạnh nào sang cạnh nào (tức là đường chéo).
Nếu ta không truyền
direction thì theo mặc định nó sẽ có giá trị
top (tức là
top –
bottom).
Tương tự chúng ta có code Hack CSS như sau:
1 2 3 |
background: -webkit-linear-gradient(direction, color-1, color-2, color-3, color-4, ...); background: -o-linear-gradient(direction, color-1, color-2, color-3, color-4, ...); background: -moz-linear-gradient(direction, color-1, color-2, color-3, color-4, ...); |
Có một lưu ý là đối với code Hack CSS thì direction không có chữ to.
Ví dụ
1 2 |
background: -webkit-linear-gradient(left, #73D2F6, #08C 22%, #7FC400 36%, #FFD583 48%, #FFB21E 63%, #FF4D4D 76%, #503873); background: linear-gradient(to right, #73D2F6, #08C 22%, #7FC400 36%, #FFD583 48%, #FFB21E 63%, #FF4D4D 76%, #503873); |
Hiệu ứng Gradient
Bạn có thể tạo hiệu ứng chuyển động màu sắc cho hình nền bằng cách vào trang CSS Gradient Animator, tùy chỉnh và sao chép đoạn mã được cung cấp để sử dụng cho website của mình.

Pingback: Liên hệ đẹp cho theme Flatsome wordpress – Liên hệ box 9 - FLATSOME - FREE EVERY THING
Pingback: Hiệu ứng chuyển màu (Gradient) với CSS3 - FLATSOME - FREE EVERY THING