Hiệu ứng chuyển sắc, Gradient Backgrounds CSS3
Chào mọi người, lúc chiều lang thang trên internet vô tình lụm được bí kíp, giờ nhanh nhanh chia sẻ đó là cách tạo được hiệu ứng chuyển sắc màu hay còn gọi là Linear Gradient Backgroundssử 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.
Trong lúc thiết kế web đôi khi bạn cần thiết kế vài hình nền với hiệu ứng chuyển sắc, vì trước đây CSS chưa làm được, 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.
. 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.
Trong lúc thiết kế web đôi khi bạn cần thiết kế vài hình nền với hiệu ứng chuyển sắc, vì trước đây CSS chưa làm được, 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à mình cũng chú thích cho các bạn ở mỗi dòng chạy được trên trình duyệt nào. Bạn có thể click vào link dưới đây để xem demo.
1. Linear Gradient (Top → Bottom)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!-- /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #1a82f7); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #1a82f7); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #1a82f7); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #1a82f7);--> |
Demo chuyển sắc Linear Gradient Top Bottom
2. Linear Gradient (Left → Right)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!-- /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #1a82f7); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #1a82f7); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #1a82f7); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #1a82f7);--> |
Demo chuyển sắc Linear Gradient Left Right
3. Linear Gradient (with Even Stops)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!-- /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); --> |
Demo chuyển sắc Linear Gradient with Even Stops
4. Linear Gradient (with Specified Arbitrary Stops)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!-- /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); --> |
Demo chuyển sắc Linear Gradient with Specified Arbitrary Stops
5. Radial Gradient (Centered, Full Size)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!-- /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #1a82f7, #2F2727); /* IE 10 */ background: -ms-radial-gradient(circle, #1a82f7, #2F2727); /* Opera cannot do radial gradients yet */--> |
Demo chuyển sắc Radial Gradient Centered Full Size
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!-- /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727); /* Opera cannot do radial gradients yet */ }--> |
Demo chuyển sắc Radial Gradient Positioned, Sized
Kết luận: Bạn cần tham khảo về các đổ màu, % vị trí, và các thông số trong code CSS trên, chú ý có hai phần Linear Gradient và Radial Gradient thường thì ở dạng Radial Gradient sẽ ,không hoạt động được trên trình duyệt Opera. Chúc mọi người thành công!
Nguồn: In4mau.blogspot.com
Không có nhận xét nào: