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 load rất nặng điều này không tốt cho SEO và cả người dùng.
Ở thời đại ngày nay chúng ta đã có CSS 3 có thể giải quyết được vấn đề này chỉ với vài dòng lệnh, giúp website load nhẹ hơn rất nhiều.
Bài này mình sẽ hướng dẫn các bạn sử dụng công cụ để tạo một hiệu ứng Gradient một cách nhanh nhất.
Các bạn vào http://www.colorzilla.com/gradient-editor/ để bắt đầu tạo hiệu ứng gradient bằng css 3.
Tại box Presets có chứa các mẫu có sẳn về hiệu ứng chuyển sắc Gradient các bạn có thể chọn mẫu mình thích, các bạn nhìn xuống dưới có một thanh cho phép các bạn điều chỉnh theo ý mình thích giống như sử dụng Photoshop vậy đó.
Copy tất cả các code trong box CSS và bỏ vào class của css như ví dụ bên dưới:
[php]
Thế là bạn đã tạo thành công một background gradient bắt mắt mà không cần dùng đến hình ảnh.
Các bạn xem demo online tại đây http://jsfiddle.net/75L7f/
