Hiệu ứng chuyển sắc, Gradient Backgrounds CSS3

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Hiệu ứng chuyển sắc màu hay còn gọi là Linear Gradient Backgrounds sử dụng bằng CSS3. Với cách làm đơn giản này bạn có thể tạo được các hiệu ứng chuyển sắc mà không cần dùng hình ảnh. Có thể áp dụng cách này cho thiết kế banner, ảnh nền, button … một cách đơn giản, vừa đẹp vừa load nhanh thay vì phải sử dụng hình ảnh như lúc trước.

Cách tạo hiệu ứng chuyển sắc Gradient Backgrounds với CSS3 này chạy tốt trên các trình duyệt phiên bản mới như: Safari 5.1+, Chrome 10+, Opera 11.10, IE6 & IE7, IE8+ … Và trong đoạn code cũng có chú thích cho các bạn ở mỗi dòng chạy được trên trình duyệt nào.

Linear Gradient (Top → Bottom)

Linear Gradient (Left → Right)

Linear Gradient (with Even Stops)

Linear Gradient (with Specified Arbitrary Stops)

Radial Gradient (Centered, Full Size)

Radial Gradient (Positioned, Sized)

Warning: Not Consistent Among Browsers

Nguồn: http://css-tricks.com/examples/CSS3Gradient/