Một trình chỉnh sửa Gradient CSS mạnh mẽ giống như Photoshop
|
Độ mờ:
|
Vị trí: | % | ||
Màu sắc: |
Vị trí: | % |
| IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Trình duyệt Android | Chrome cho Android |
|---|---|---|---|---|---|---|---|---|
| 6 - 8
Hỗ trợ một phần bằng cú pháp filter
Sử dụng trình duyệt: 0.03%
|
4 - 9
Hỗ trợ bằng cú pháp -webkit- cũ
Sử dụng trình duyệt: 0% Chọn "Tối đa hóa tương thích" để hỗ trợ |
4 - 5
Hỗ trợ bằng cú pháp -webkit- cũ
Sử dụng trình duyệt: 0.01% Chọn "Tối đa hóa tương thích" để hỗ trợ |
3.2 - 4.3
Hỗ trợ bằng cú pháp -webkit- cũ
Sử dụng trình duyệt: 0% Chọn "Tối đa hóa tương thích" để hỗ trợ |
2.1 - 3
Hỗ trợ bằng cú pháp -webkit- cũ
Sử dụng trình duyệt: 0.01% Chọn "Tối đa hóa tương thích" để hỗ trợ |
||||
| 9
Hỗ trợ một phần bằng cú pháp filter
Hỗ trợ đầy đủ bằng cách sử dụng SVG (chọn "IE9 hỗ trợ") Sử dụng trình duyệt: 0.05% Chọn "Tối đa hóa tương thích" để hỗ trợ |
3.6 - 15
Hỗ trợ bằng tiền tố -moz-
Sử dụng trình duyệt: 0.01% Chọn "Tối đa hóa tương thích" để hỗ trợ |
10 - 25
Hỗ trợ bằng tiền tố -webkit-
Sử dụng trình duyệt: 0% Chọn "Tối đa hóa tương thích" để hỗ trợ |
5.1 - 6
Hỗ trợ bằng tiền tố -webkit-
Sử dụng trình duyệt: 0.01% Chọn "Tối đa hóa tương thích" để hỗ trợ |
11.1 - 11.5
Hỗ trợ bằng tiền tố -o-
Sử dụng trình duyệt: 0% Chọn "Tối đa hóa tương thích" để hỗ trợ |
5.1 - 6.1
Hỗ trợ bằng tiền tố -webkit-
Sử dụng trình duyệt: 0% Chọn "Tối đa hóa tương thích" để hỗ trợ |
4 - 4.3
Hỗ trợ bằng tiền tố -webkit-
Sử dụng trình duyệt: 0.09% Chọn "Tối đa hóa tương thích" để hỗ trợ |
||
| 10+
Hỗ trợ đầy đủ (không tiền tố)
|
12+
Hỗ trợ đầy đủ (không tiền tố)
|
16+
Hỗ trợ đầy đủ (không tiền tố)
|
26+
Hỗ trợ đầy đủ (không tiền tố)
|
6.1+
Hỗ trợ đầy đủ (không tiền tố)
|
12+
Hỗ trợ đầy đủ (không tiền tố)
|
7.1+
Hỗ trợ đầy đủ (không tiền tố)
|
4.4+
Hỗ trợ đầy đủ (không tiền tố)
|
46+
Hỗ trợ đầy đủ (không tiền tố)
|
(?)
Liên kết đến tài liệu về gradient CSS: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].
Trình chỉnh sửa Gradient CSS cuối cùng được tạo ra bởi Alex Sirota. Nếu bạn thích công cụ này, kiểm tra ColorZilla để biết thêm các công cụ tiên tiến hơn như dụng cụ lấy màu, bảng chọn màu, trình chỉnh sửa bảng màu và trình phân tích trang web.
Như bạn có thể biết, HTML5 đã giới thiệu nhiều tính năng thú vị cho các nhà phát triển Web. Một trong những tính năng đó là khả năng chỉ định dải màu bằng CSS3 thuần túy, không cần phải tạo bất kỳ hình ảnh nào và sử dụng chúng như nền lặp lại cho hiệu ứng dải màu.
Quan trọng: Bạn sẽ cần một phiên bản gần đây của Firefox, Chrome, Safari, Opera hoặc IE để sử dụng Trình tạo Dải màu này. Các dải màu CSS kết quả là cross-browser - chúng sẽ hoạt động trong các trình duyệt này và cũng sẽ quay lại một dải màu đơn giản hơn trong các phiên bản cũ hơn của Internet Explorer.
Trình điều khiển gradient chính cho phép bạn:
Bảng 'Preview' cho phép xem trước gradient hiện tại dưới dạng dọc hoặc ngang, và cũng cho phép xem trước nhanh cách gradient fallback Internet Explorer sẽ nhìn trong IE.
Cuối cùng, bảng 'CSS' luôn có CSS cho gradient hiện tại để dễ dàng sao chép và dán vào stylesheet của bạn. Bạn cũng có thể sử dụng bảng này để nhập CSS gradient hiện có vào công cụ.
Các cài đặt gradient 'Ultimate Web 2.0 Gradients' được chuyển đổi từ công việc của deziner folio và SGlider12.
Color Picker là một sự điều chỉnh nhỏ của John Dyer's Color Picker.
Chức năng mã hóa Base-64 là từ webtoolkit.
Một số biểu tượng bởi Yusuke Kamiyamane.