Thông tin khái quát
Hiệu ứng bộ lọc đã tồn tại một thời gian nhưng đã được thiết kế để hoạt động trong SVG. Chúng cực kỳ mạnh mẽ trong việc áp dụng các hiệu ứng như cường độ màu, làm cong hoặc làm mờ hình ảnh trước khi kết hợp và kết xuất vào tài liệu.
Vào năm 2009, Mozilla từng nói rằng SVG là chưa đủ! Cuối cùng, họ quyết định tiến hành thêm một bước và cho phép chúng hiển thị trên nội dung HTML trong Firefox 3.5. Xem bản minh hoạ vượt thời gian của các bộ lọc SVG trên <video> đang phát. Xin nhắc lại, chỉ hoạt động trong Firefox nhưng vẫn là đầu gối của ong.
Hôm nay
Từ cuối năm 2011 đến cuối năm 2011, Adobe (cùng với các sản phẩm khác) đã nỗ lực làm việc để mang công nghệ tuyệt vời này vào CSS. Cụ thể, tôi đang đề cập đến CSS Filter Effects 1.0, WebKit đã bắt đầu triển khai.
Việc bật bộ lọc trực tiếp trong CSS có nghĩa là gần như mọi phần tử DOM đều có thể tận dụng các bộ lọc này! Hình ảnh, <video>, <canvas>, bạn có thể liên hệ với chúng tôi.
Hồ sơ
Thông số kỹ thuật này cũng xác định chương trình đổ bóng CSS, cuối cùng sẽ đưa công nghệ chương trình đổ bóng OpenGL vào CSS. Điều này RẤT thú vị! Tuy nhiên, có một số điều cần cân nhắc về bảo mật bất cứ khi nào bạn mở GPU của hệ thống. Vì lý do này, WebKit hiện chỉ có các chức năng lọc CSS được triển khai.
Hỗ trợ
Chrome 18.0.976.0 (hiện tại canary), Webkit hàng đêm
Trong các phiên bản web được tăng tốc, bạn có thể áp dụng các bộ lọc cho nội dung được tăng tốc phần cứng ( ví dụ: img { -webkit-transform: translateZ(0); }). Trong Chrome, các bộ lọc trên nội dung được tăng tốc vẫn đang trong quá trình thực hiện (sử dụng cờ --enable-accelerated-filters). Trong đó có <video> (được tăng tốc theo mặc định).