Mục lục:
- CSS Gradient Background Maker
- Làm thế nào Máy phát điện Gradient CSS3 làm việc
- . background {/ * IE10 Consumer Preview * / background-image: -mạng-xuyên tâm (trung tâm, hình tròn gần nhất, #FFFFFF 0%, # 00A3EF 100%); / * Mozilla Firefox * / background-image: -moz-radial-gradient (trung tâm, hình tròn gần nhất, #FFFFFF 0%, # 00A3EF 100%); / * Opera * / nền-hình ảnh: -chiều-xuyên-gradient (trung tâm, hình tròn gần nhất, #FFFFFF 0%, # 00A3EF 100%); / * Webkit (Safari / Chrome 10) * / background-image: -webkit-gradient (trung tâm, trung tâm, 0, trung tâm, 140, điểm dừng màu (0, #FFFFFF), color-stop (1, # 00A3EF )); / * Webkit (Chrome 11+) * / nền-hình ảnh: -chiều web-gradient xuyên tâm (trung tâm, hình tròn gần nhất, #FFFFFF 0%, # 00A3EF 100%); / * W3C Markup, IE10 Release Preview * / background-image: gradient xuyên tâm (hình tròn gần nhất ở giữa, #FFFFFF 0%, # 00A3EF 100%);}
Video: Học lập trình Web A-Z - HTML - Bài 6 - Hiểu về HTML DOM và cách HTML DOM hoạt động 2025
Khả năng tạo pha trộn gradient phức tạp là một trong những cải tiến thực sự ấn tượng trong CSS3. Cho đến sự xuất hiện của CSS3, các nhà thiết kế dựa vào các tệp hình ảnh gạch để tạo nền văn bản đằng sau các trang và các phần tử thiết kế (như các thẻ). Những tệp tin hình ảnh làm chậm lại các trang và trông có vẻ khắt khe khi họ tải xuống từ từ xuống các trang mà người dùng đã mở.
Đó là tin tốt.
Hạn chế là xác định cú pháp cho một gradient đơn giản là một rắc rối bởi vì các trình duyệt khác nhau có cú pháp khác nhau để xác định ngay cả những gradient đơn giản này. Và khi nói đến việc xác định gradient đường chéo hoặc xuyên tâm, sự khác biệt giữa cú pháp trình duyệt trở nên rõ ràng hơn.
Chỉ cần đưa ra một cảm giác này, kiểm tra CSS yêu cầu tạo ra hình nền trong hình bên dưới:
nền: -moz-radial-gradient (trung tâm, hình elip, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%; / * FF3. 6 bit * / background: -chức duyệt web-gradient (xuyên tâm, trung tâm, 0px, center center, 100%, color-stop (0%, rgba (228, 245, 252, 1)), color-stop (50% rgba (191, 232, 249, 1)), color-stop (51%, rgba (159, 216, 239, 1)), dừng màu (100%, rgba (42, 176, 237, 1)); / * Chrome, Safari4 + * / nền: -bộ trung tâm, hình elip, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * Chrome10 +, Safari5. (1, 2, 3, 4, 4, 5, 6, 7, 8, 7, 8) 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * Opera 12+ * / nền: -màn xuyên gradient (trung tâm, hình elip, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * IE10 + * / nền: gradient xuyên tâm (ellipse ở trung tâm, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * W3C * /
Vì vậy, một nhà thiết kế người nghèo là gì? May mắn có một số thực sự hữu ích CSS gradient máy phát điện trực tuyến. Đây là ba trong số những điều tốt nhất:
Trình tạo Grabient CSS3
Tài nguyên này đặc biệt hữu ích cho việc tạo nền gradient cho các nút vì cửa sổ xem trước là một hình vuông có kích thước nút đẹp, sạch sẽ.
CSS Gradient Background Maker
Một số dudes ở ga gara gần Seattle đã tạo ra một máy tạo gradient CSS3 dễ sử dụng và mạnh mẽ mà họ gọi là CSS Gradient Background Maker. Họ đã có một sự khởi đầu mới mà họ gọi cho Microsoft, và các gradient mà bạn tạo ở đây làm việc - có, Internet Explorer (phiên bản 10 và mới hơn), mà còn tất cả các trình duyệt hiện tại khác.
Trình tạo nền nền Gradient của CSS có thể là cách nhanh nhất để tạo các gradient của nhóm khi có hàng chục bộ trước.
Làm thế nào Máy phát điện Gradient CSS3 làm việc
Tất cả ba máy tạo gradient của CSS3 được liệt kê ở đây, và một số khác, tạo các khối CSS3 mà các nhà thiết kế có thể sao chép và dán vào các tệp CSS. Họ tạo ra không cung cấp rất nhiều trợ giúp trong cách làm điều đó - họ mong muốn bạn có thể xử lý xác định nền CSS3 cho các phần tử và các bộ chọn lớp và div trong tệp tin CSS.
Nhưng quá trình này không quá khó. Ví dụ, nếu bạn tạo ra một phong cách lớp học và tên nó. nền, bạn có thể sao chép và dán một phong cách gradient vào bộ chọn đó như sau:
. background {/ * IE10 Consumer Preview * / background-image: -mạng-xuyên tâm (trung tâm, hình tròn gần nhất, #FFFFFF 0%, # 00A3EF 100%); / * Mozilla Firefox * / background-image: -moz-radial-gradient (trung tâm, hình tròn gần nhất, #FFFFFF 0%, # 00A3EF 100%); / * Opera * / nền-hình ảnh: -chiều-xuyên-gradient (trung tâm, hình tròn gần nhất, #FFFFFF 0%, # 00A3EF 100%); / * Webkit (Safari / Chrome 10) * / background-image: -webkit-gradient (trung tâm, trung tâm, 0, trung tâm, 140, điểm dừng màu (0, #FFFFFF), color-stop (1, # 00A3EF)); / * Webkit (Chrome 11+) * / nền-hình ảnh: -chiều web-gradient xuyên tâm (trung tâm, hình tròn gần nhất, #FFFFFF 0%, # 00A3EF 100%); / * W3C Markup, IE10 Release Preview * / background-image: gradient xuyên tâm (hình tròn gần nhất ở giữa, #FFFFFF 0%, # 00A3EF 100%);}
Và sau đó, bạn có thể áp dụng nền cho bất kỳ trong tệp HTML của bạn. Ở đây, nền được áp dụng cho một thẻ:
(nội dung ở đây)
