01 trên 04
Tạo Gradients Linear Cross-Browser với CSS3
Gradients tuyến tính
Loại gradient phổ biến nhất mà bạn sẽ thấy là gradient tuyến tính của hai màu. Điều này có nghĩa là gradient sẽ di chuyển theo một đường thẳng thay đổi dần dần từ màu đầu tiên sang dòng thứ hai dọc theo dòng đó. Hình ảnh trên trang này cho thấy một gradient đơn giản từ trái sang phải của # 999 (màu xám đậm) thành #fff (màu trắng).
Các gradient tuyến tính là dễ nhất để xác định và có hỗ trợ nhiều nhất trong các trình duyệt. Các gradient tuyến tính CSS3 được hỗ trợ trong Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ và Safari 4+. Internet Explorer có thể thêm gradient bằng cách sử dụng một bộ lọc và hỗ trợ chúng trở lại IE 5.5. Đây không phải là CSS3, nhưng nó là một tùy chọn cho khả năng tương thích giữa các trình duyệt.
Khi bạn định nghĩa một gradient, bạn cần xác định một số thứ khác nhau:
- Loại gradient là gì - tuyến tính hoặc hướng tâm
- Trường hợp gradient nên bắt đầu
- Nơi gradient nên dừng lại
- Màu gì có trong gradient và nơi chúng nên bắt đầu và dừng lại
Để định nghĩa các gradient tuyến tính bằng cách sử dụng CSS3, bạn viết:
linear-gradient ( góc hoặc bên hoặc góc , màu dừng , dừng màu )
- Đầu tiên bạn định nghĩa kiểu gradient với tên tuyến tính -gradient.
- Sau đó, bạn xác định điểm bắt đầu và điểm dừng của gradient theo một trong hai cách: góc của đường theo độ từ 0 đến 359, với 0 độ hướng thẳng lên trên. Hoặc với chức năng "bên hoặc góc", chẳng hạn như trái, phải, dưới cùng và trên cùng. Chúng sẽ được giải thích chi tiết hơn ở trang tiếp theo. Nếu bạn để chúng ra, gradient sẽ chảy từ trên xuống dưới phần tử.
- Sau đó, bạn xác định các điểm dừng màu. Bạn xác định màu dừng với mã màu và phần trăm tùy chọn. Tỷ lệ phần trăm cho trình duyệt biết vị trí trên đường để bắt đầu hoặc kết thúc bằng màu đó. Mặc định là đặt màu sắc đồng đều dọc theo dòng. Bạn sẽ tìm hiểu thêm về các điểm dừng màu trên trang 3.
Vì vậy, để xác định gradient ở trên với CSS3, bạn viết:
gradient tuyến tính (trái, # 999999 0%, #ffffff 100%);
Và để đặt nó làm nền của DIV bạn viết:
div {
background-image: linear-gradient (trái, # 999999 0%, #ffffff 100%;
}
Tiện ích mở rộng trình duyệt cho Gradient tuyến tính CSS3
Để làm cho gradient của bạn hoạt động trên nhiều trình duyệt, bạn cần phải sử dụng các tiện ích mở rộng của trình duyệt cho hầu hết các trình duyệt và bộ lọc cho Internet Explorer 9 trở xuống (thực ra là 2 bộ lọc). Tất cả những yếu tố này đều có cùng các yếu tố để xác định độ dốc của bạn (ngoại trừ việc bạn chỉ có thể xác định gradient 2 màu trong IE).
Bộ lọc và phần mở rộng của Microsoft —Internet Explorer là thách thức lớn nhất để hỗ trợ, bởi vì bạn cần ba dòng khác nhau để hỗ trợ các phiên bản trình duyệt khác nhau. Để có được gradient màu xám sang trắng bạn sẽ viết:
/ * IE 5,5–7 * /
bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8–9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (trái, # 999999 0%, #ffffff 100%);
Tiện ích mở rộng Mozilla —Ứng dụng -moz- hoạt động giống như thuộc tính CSS3, chỉ với phần mở rộng -moz-. Để có được gradient trên cho Firefox, hãy viết:
-moz-linear-gradient (trái, # 999999 0%, #ffffff 100%);
Tiện ích mở rộng của Opera —Mở rộng -o- thêm gradient vào Opera 11.1+. Để có được gradient ở trên, hãy viết:
gradient -o-tuyến tính (trái, # 999999 0%, #ffffff 100%);
Phần mở rộng Webkit —Mở rộng -webkit- hoạt động rất giống với thuộc tính CSS3. Để xác định gradient ở trên cho Safari 5.1+ hoặc Chrome 10+ bạn viết:
-webkit-linear-gradient (trái, # 999999 0%, #ffffff 100%);
Ngoài ra còn có một phiên bản cũ hơn của phần mở rộng Webkit hoạt động với Chrome 2+ và Safari 4+. Trong đó, bạn xác định loại gradient là một giá trị, thay vì trong tên thuộc tính. Để có được gradient xám trắng với phần mở rộng này, hãy viết:
-webkit-gradient (tuyến tính, trái trên cùng, bên phải trên cùng, màu sắc dừng lại (0%, # 999999), màu sắc-stop (100%, # ffffff));
Mã CSS Gradient tuyến tính CSS3 đầy đủ
Đối với hỗ trợ đa trình duyệt để có được màu xám đến trắng ở trên, trước tiên bạn nên bao gồm một màu dự phòng cho các trình duyệt không hỗ trợ gradient và mục cuối cùng phải là kiểu CSS3 cho các trình duyệt hoàn toàn tuân thủ. Vì vậy, bạn viết:
nền: # 999999;
nền: -moz-linear-gradient (trái, # 999999 0%, #ffffff 100%);
nền: -webkit-gradient (tuyến tính, trên cùng bên trái, bên phải trên cùng, màu dừng (0%, # 999999), màu dừng (100%, # ffffff));
nền: -webkit-linear-gradient (bên trái, # 999999 0%, #ffffff 100%);
background: -o-linear-gradient (trái, # 999999 0%, #ffffff 100%);
nền: -ms-linear-gradient (trái, # 999999 0%, #ffffff 100%);
bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
background: gradient tuyến tính (trái, # 999999 0%, #ffffff 100%);
Các trang tiếp theo trong hướng dẫn này giải thích các phần của một gradient chi tiết hơn và trang cuối cùng trỏ bạn đến một công cụ là một cách tuyệt vời để tạo các gradient CSS3 một cách tự động.
Xem gradient tuyến tính này trong hành động chỉ sử dụng CSS.
02 trên 04
Tạo đường chéo - Góc của Gradient
Điểm bắt đầu và điểm dừng xác định góc của gradient. Hầu hết các gradient tuyến tính là từ trên xuống dưới hoặc từ trái sang phải. Nhưng có thể xây dựng một gradient di chuyển trên một đường chéo. Các hình ảnh trên trang này cho thấy một gradient đơn giản di chuyển trong một góc 45 độ trên hình ảnh từ phải sang trái.
Góc để xác định đường Gradient
Góc là một đường thẳng trên một vòng tròn tưởng tượng ở giữa phần tử. 0deg chỉ lên, 90deg điểm bên phải, 180deg điểm xuống và 270deg điểm bên trái. Bạn có thể xác định bất kỳ góc nào từ 0 đến 359 độ.
Bạn nên lưu ý rằng trong một hình vuông, góc 45 độ di chuyển từ góc trên bên trái đến góc dưới bên phải, nhưng trong một hình chữ nhật, điểm bắt đầu và điểm kết thúc hơi ngoài hình dạng, như bạn thấy trong hình.
Cách phổ biến hơn để xác định gradient chéo là xác định một góc, chẳng hạn như trên cùng bên phải và gradient sẽ di chuyển từ góc đó sang góc đối diện. Bạn có thể xác định vị trí bắt đầu bằng các từ khóa sau:
- hàng đầu
- đúng
- đáy
- trái
- trung tâm
Và chúng có thể được kết hợp để cụ thể hơn, chẳng hạn như:
- trên cùng bên phải
- trên cùng bên trái
- Trung tâm hàng đầu
- góc phải ở phía dưới
- phía dưới bên trái
- Trung tâm trên
- đúng trung tâm
- trái trung tâm
Dưới đây là CSS cho một gradient tương tự như một trong những hình, màu đỏ sang màu trắng di chuyển từ góc trên bên phải để phía dưới bên trái:
nền: ## 901A1C;
background-image: -moz-linear-gradient (phía trên bên phải, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (tuyến tính, đỉnh phải, đáy trái, màu dừng (0, # 901A1C), màu dừng (1, #FFFFFF));
nền: -webkit-linear-gradient (phải trên cùng, # 901A1C 0%, #ffffff 100%);
background: -o-linear-gradient (phía trên bên phải, # 901A1C 0%, #ffffff 100%);
nền: -ms-linear-gradient (phía trên bên phải, # 901A1C 0%, #ffffff 100%);
nền: linear-gradient (phải trên cùng, # 901A1C 0%, #ffffff 100%);
Bạn có thể nhận thấy rằng không có bộ lọc IE nào trong ví dụ này. Đó là bởi vì IE chỉ cho phép hai loại bộ lọc: từ trên xuống dưới (mặc định) và từ trái sang phải (với công tắc GradientType = 1).
Xem gradient tuyến tính chéo này trong hành động chỉ sử dụng CSS.
03 trên 04
Dừng màu
Với gradient tuyến tính CSS3, bạn có thể thêm nhiều màu sắc cho gradient của mình để tạo ra hiệu ứng thậm chí còn đẹp hơn. Để thêm các màu này, bạn thêm các màu bổ sung vào cuối thuộc tính của mình, được phân tách bằng dấu phẩy. Bạn nên bao gồm nơi trên dòng màu sắc nên bắt đầu hoặc kết thúc là tốt.
Bộ lọc Internet Explorer chỉ hỗ trợ hai điểm dừng màu, vì vậy khi bạn tạo gradient này, bạn chỉ nên bao gồm màu đầu tiên và thứ hai mà bạn muốn hiển thị.
Đây là CSS cho gradient 3 màu ở trên:
nền: #ffffff;
nền: -moz-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-gradient (tuyến tính, đầu trái, phải trên cùng, màu dừng (0%, # ffffff), màu dừng (51%, # 901A1C), dừng màu (100%, # ffffff));
nền: -webkit-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -o-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
nền: -ms-linear-gradient (bên trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
background: gradient tuyến tính (trái, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Xem gradient tuyến tính này với ba điểm dừng màu trong hành động chỉ bằng CSS.
04/04
Làm cho tòa nhà Gradients dễ dàng hơn
Có hai trang web tôi khuyên bạn nên giúp bạn xây dựng gradient, mỗi trang web đều có những lợi ích và hạn chế đối với họ, tôi chưa tìm thấy trình tạo gradient làm mọi thứ.
Trình tạo Gradient CSS cuối cùng
Trình tạo gradient này rất phổ biến vì nó thực hiện theo cách tương tự như các trình tạo gradient trong các chương trình như Photoshop. Tôi cũng thích nó vì nó cung cấp cho bạn tất cả các phần mở rộng CSS, không chỉ Webkit và Mozilla. Vấn đề với máy phát điện này là nó chỉ hỗ trợ các gradient ngang và dọc. Nếu bạn muốn làm gradient đường chéo, bạn phải đi đến máy phát điện khác tôi khuyên bạn nên.
Trình tạo Gradient CSS3
Máy phát điện này đã cho tôi một chút thời gian để hiểu hơn cái đầu tiên, nhưng nó hỗ trợ thay đổi hướng đến một đường chéo.
Nếu bạn biết về một Trình tạo CSS khác mà bạn thích tốt hơn những điều này, vui lòng cho chúng tôi biết .