Giới thiệu
Bộ lọc là một công cụ mạnh mẽ mà tác giả trang web có thể sử dụng để đạt được hiệu ứng hình ảnh thú vị. Trong bài viết này, chúng ta sẽ tìm hiểu về những tác động của bộ lọc, chức năng và cách sử dụng bộ lọc. Chúng tôi sẽ trình bày một số ví dụ về tất cả các bộ lọc tạo sẵn được xác định cho CSS. Chúng tôi cũng sẽ đề cập đến các cân nhắc về hiệu suất khi sử dụng bộ lọc trên máy tính để bàn và thiết bị di động, vì việc hiểu rõ tác động của các bộ lọc đối với tốc độ là rất quan trọng để mang lại trải nghiệm tốt cho người dùng. Cuối cùng, chúng ta sẽ xem xét trạng thái triển khai hiện tại trong các trình duyệt hiện đại.
Quá khứ, hiện tại và tương lai của các hiệu ứng bộ lọc
Hiệu ứng bộ lọc bắt nguồn như một phần của quy cách Đồ hoạ vectơ có thể mở rộng (SVG). Chúng được tạo để áp dụng một số hiệu ứng hình ảnh dựa trên pixel khác nhau cho một bản vẽ vectơ. Theo thời gian khi các nhà cung cấp trình duyệt thêm các tính năng của SVG vào trình duyệt của họ, tính hữu ích của các bộ lọc trở nên rõ ràng. Robert O’Callahan từ Mozilla đã nảy ra ý tưởng thông minh về việc sử dụng bộ lọc SVG thông qua ứng dụng CSS cho nội dung HTML "bình thường". Robert đã tạo nguyên mẫu cho một phiên bản sớm cho thấy sức mạnh của việc kết hợp các bộ lọc và định kiểu CSS. Các nhóm làm việc CSS và SVG trong W3C đã quyết định hài hoà việc sử dụng các bộ lọc cho cả HTML và SVG thông qua định kiểu CSS, và do đó thuộc tính "filter" cho CSS ra đời. Hiện tại, một đội ngũ chung gồm những người làm về CSS và SVG đang làm rất nhiều việc để làm cho các bộ lọc trở nên hữu ích trên toàn cầu. Bạn có thể tìm thấy thông số kỹ thuật hiện tại cho tất cả những nội dung này tại đây.
Giai đoạn mới cho tài sản CSS "filter" (bộ lọc)
Đôi khi, Deja Vu gây ấn tượng với một nhà phát triển web khi thấy "bộ lọc" trong kiểu CSS. Điều này là do các phiên bản cũ của Internet Explorer có thuộc tính "filter" được hiển thị qua CSS để thực hiện một số chức năng dành riêng cho nền tảng. Tính năng này đã không được dùng nữa và được thay thế bằng thuộc tính "filter" tiêu chuẩn, hiện là một phần của CSS3. Vì vậy, khi bạn thấy "bộ lọc" tự nhiên trên một số trang web cũ, bạn không cần phải nhầm lẫn. Thuộc tính 'filter' mới là nơi diễn ra tất cả hành động và các phiên bản mới của IE đang triển khai thuộc tính này giống như tất cả các trình duyệt hiện đại.
Cách bộ lọc hoạt động
Vậy chính xác thì bộ lọc có chức năng gì? Cách dễ nhất để hình dung về bộ lọc là một bước xử lý bài đăng có chức năng kỳ diệu sau khi tất cả nội dung trang của bạn đã được bố trí và vẽ.
Khi tải một trang web, trình duyệt cần áp dụng kiểu, thực hiện bố cục rồi kết xuất trang để có nội dung cần xem. Các bộ lọc sẽ kích hoạt sau tất cả các bước đó và ngay trước khi trang được sao chép sang màn hình. Những gì họ cần làm là chụp nhanh trang đã kết xuất dưới dạng hình ảnh bitmap, sau đó thực hiện một số phép màu đồ họa trên các pixel trong ảnh chụp nhanh rồi vẽ kết quả lên đầu hình ảnh trang gốc. Bạn có thể hình dung về chúng như một bộ lọc đặt phía trước ống kính camera. Những gì bạn thấy qua ống kính là thế giới bên ngoài được thay đổi nhờ hiệu ứng của bộ lọc.
Tất nhiên, điều này có nghĩa là bạn sẽ phải tốn thời gian khi vẽ một trang có các bộ lọc, nhưng việc sử dụng các bộ lọc đúng cách sẽ có tác động tối thiểu đến tốc độ của trang web.
Ngoài ra, tương tự như việc bạn có thể xếp chồng một số bộ lọc trước nhau trên ống kính máy ảnh, bạn có thể áp dụng lần lượt số lượng bộ lọc tuỳ ý để đạt được tất cả các loại hiệu ứng.
Các bộ lọc được xác định bằng SVG và CSS
Vì các bộ lọc ban đầu bắt nguồn từ SVG, nên có nhiều cách để xác định và sử dụng chúng. Bản thân SVG có một phần tử <filter> để gói gọn các định nghĩa của nhiều hiệu ứng bộ lọc bằng cú pháp XML. Tập hợp bộ lọc do CSS xác định tận dụng cùng một mô hình đồ hoạ, nhưng chúng là các định nghĩa đơn giản hơn nhiều, dễ sử dụng trong biểu định kiểu.
Hầu hết các bộ lọc CSS có thể được trình bày dưới dạng bộ lọc SVG và CSS cũng cho phép bạn tham chiếu một bộ lọc được chỉ định trong SVG nếu bạn muốn. Các nhà thiết kế bộ lọc CSS đã rất nỗ lực để giúp các tác giả web dễ dàng áp dụng bộ lọc hơn. Vì vậy, bài viết này sẽ chỉ đề cập đến các bộ lọc có sẵn trực tiếp từ CSS, hiện tại đang bỏ qua các định nghĩa SVG.
Cách áp dụng bộ lọc CSS
Việc sử dụng bộ lọc của CSS được thực hiện bằng cách sử dụng thuộc tính "filter" được áp dụng cho bất kỳ phần tử hiển thị nào trên trang web của bạn. Đối với một ví dụ rất đơn giản, bạn có thể viết nội dung như
div { { % mixin filter: grayscale(100%); % } }
và điều đó sẽ làm cho nội dung bên trong mọi <div>phần tử trên trang chuyển sang màu xám. Đây là công cụ tuyệt vời để bạn biến trang của mình thành một hình ảnh truyền hình từ những năm 1940.
Hầu hết các bộ lọc đều có một số dạng tham số để kiểm soát mức độ lọc được thực hiện. Ví dụ: nếu bạn muốn tạo kiểu cho nội dung của mình để có thể so sánh giữa phiên bản màu gốc và phiên bản thang màu xám, hãy thực hiện như sau:
div { { % mixin filter: grayscale(50%); % } }
Nếu muốn áp dụng lần lượt nhiều bộ lọc khác nhau, rất đơn giản. Bạn chỉ cần sắp xếp chúng theo thứ tự trong CSS như sau:
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
Ví dụ đó trước tiên sẽ làm cho tất cả thang màu xám ban đầu, sau đó áp dụng hiệu ứng màu nâu đỏ và sẽ có dạng như sau:
Với khả năng linh hoạt sẵn có để áp dụng lần lượt các bộ lọc, bạn có thể đạt được tất cả các loại hiệu ứng – bạn có thể tuỳ ý thử nghiệm việc tạo ra các kết quả đáng kinh ngạc.
Những hiệu ứng bộ lọc có thể sử dụng khi sử dụng CSS
Vì vậy, cơ chế bộ lọc SVG ban đầu vừa mạnh mẽ nhưng đồng thời có thể gây khó khăn khi sử dụng. Do đó, CSS đưa ra một loạt các hiệu ứng bộ lọc chuẩn giúp việc sử dụng chúng thực sự dễ dàng.
Hãy cùng tìm hiểu kỹ hơn về từng biện pháp.
- thang màu xám(số lượng)
- Phương thức này sẽ chuyển đổi màu trong hình ảnh đầu vào sang sắc xám. "Số tiền" được áp dụng kiểm soát mức độ áp dụng của lượt chuyển đổi màu xám. Nếu là 100% thì mọi thứ sẽ là màu xám, nếu giá trị này là 0% thì màu sắc sẽ không thay đổi. Bạn có thể sử dụng số dấu phẩy động ở đây nếu bạn thích nó hơn tỷ lệ phần trăm, tức là 0 hoạt động giống như 0% trong khi 1.0 hoạt động giống như 100%.
- màu nâu đỏ(số tiền)
- Phương pháp này khiến màu được chuyển sang màu nâu đỏ như trong các bức ảnh cũ. "Số lượng" được áp dụng hoạt động theo cách tương tự như đối với bộ lọc "thang màu xám" - cụ thể là 100% làm cho tất cả các màu có tông màu nâu đỏ hoàn toàn và các giá trị nhỏ hơn cho phép áp dụng hiệu ứng theo tỷ lệ nhỏ hơn.
- Bão hòa(số lượng)
- Cách này áp dụng hiệu ứng độ bão hoà màu cho các màu sắc giúp các màu đó trông sống động hơn. Đó là hiệu ứng thú vị có thể làm cho ảnh trông giống như áp phích hoặc phim hoạt hình.Hiệu ứng này cũng cho phép bạn sử dụng một giá trị lớn hơn 100% để thực sự nhấn mạnh độ rực màu. Chắc chắn là một hiệu ứng có thể khiến mọi thứ trông khá kỳ lạ!
- màu-xoay(góc)
- Đây là một hiệu ứng đa dạng màu sắc có thể dùng để thu được những kết quả thú vị. Chức năng của công cụ này là thay đổi màu sắc xung quanh để làm cho hình ảnh đầu vào trông hoàn toàn khác. Nếu bạn có thể hình dung một phổ màu chuyển từ đỏ sang tím xung quanh bánh xe màu, thì hiệu ứng này sẽ lấy màu ban đầu trên bánh xe làm đầu vào và xoay màu đó theo tham số "angle" để tạo ra màu trên bánh xe mà nó xoay vào dưới dạng giá trị màu đầu ra. Vì vậy, tất cả các màu trong hình ảnh đều được dịch chuyển theo cùng một 'góc' trên bánh xe. Đây tất nhiên là cách làm để đơn giản hoá, nhưng chúng tôi hy vọng cách này hợp lý.
- đảo ngược(số tiền)
- Hiệu ứng này lật màu – để nếu "số tiền" được áp dụng là 100%, kết quả sẽ giống như ảnh chụp ngược lại từ những chiếc máy ảnh cũ trên phim! Giống như trước đây, việc sử dụng các giá trị nhỏ hơn 100% sẽ dần áp dụng hiệu ứng đảo ngược.
- độ mờ(số lượng)
- Nếu bạn muốn lọc nội dung có dạng bán trong suốt, thì đây là giải pháp dành cho bạn. Giá trị "amount" xác định độ mờ của đầu ra. Vì vậy, giá trị 100% là hoàn toàn mờ nên đầu ra sẽ giống hệt với đầu vào. Khi giá trị giảm xuống dưới 100%, hình ảnh đầu ra sẽ trở nên ít mờ hơn (trong suốt hơn) và bạn sẽ ngày càng thấy ít hình ảnh đó hơn. Tất nhiên điều này có nghĩa là nếu nội dung chồng lên nội dung khác trên trang thì nội dung bên dưới sẽ bắt đầu hiển thị. "amount" bằng 0% có nghĩa là nó sẽ biến mất hoàn toàn - nhưng lưu ý, bạn vẫn có thể khiến các sự kiện như nhấp chuột, v.v. xảy ra trên các đối tượng hoàn toàn trong suốt. Vì vậy, điều này rất hữu ích nếu bạn muốn tạo các khu vực có thể nhấp mà không hiển thị bất cứ thứ gì.
Thuộc tính này hoạt động giống như thuộc tính "độ mờ" mà bạn đã biết. Nói chung, thuộc tính "độ mờ" CSS không được tăng tốc phần cứng, nhưng một số trình duyệt triển khai bộ lọc sử dụng tính năng tăng tốc phần cứng sẽ tăng tốc phiên bản bộ lọc độ mờ để có hiệu suất tốt hơn nhiều.
- độ sáng(số tiền)
- Tính năng này tương tự như tính năng điều khiển độ sáng trên TV. Tính năng này điều chỉnh màu giữa màu đen hoàn toàn và màu gốc theo tỷ lệ với thông số "amount". Nếu thiết lập mức này là 0%, bạn sẽ không thấy màu đen, nhưng khi giá trị tăng lên 100%, bạn sẽ thấy hình ảnh gốc sáng lên ngày càng nhiều, cho đến khi bạn đạt mức 100% ở nơi giống với hình ảnh nhập vào. Tất nhiên là bạn vẫn có thể tiếp tục - vì vậy, việc đặt giá trị 200% sẽ làm cho ảnh sáng gấp đôi so với ảnh gốc - rất phù hợp để điều chỉnh những bức ảnh thiếu sáng!
- độ tương phản(số lượng)
- Nhiều chức năng điều khiển hơn trên TV của bạn! Công cụ này sẽ điều chỉnh độ chênh lệch giữa phần tối nhất và phần sáng nhất của hình ảnh nhập vào. Nếu bạn sử dụng 0%, bạn sẽ có màu đen giống như "độ sáng", điều đó không quá thú vị. Tuy nhiên, khi bạn tăng giá trị lên 100%, sự khác biệt về độ tối sẽ thay đổi cho đến khi bạn đạt 100% và đó lại là hình ảnh gốc. Bạn cũng có thể vượt quá 100% cho hiệu ứng này, điều này làm tăng sự khác biệt giữa màu sáng và màu tối nhiều hơn nữa.
- làm mờ(bán kính)
- Nếu muốn tạo lề mềm cho nội dung, bạn có thể thêm hiệu ứng làm mờ. Chiếc đồng hồ này trông giống như chiếc Vaseline cổ điển trên một tấm kính, trước đây là một kỹ thuật làm phim phổ biến. Sản phẩm này làm nhám tất cả các màu sắc cùng nhau và lan truyền hiệu ứng của chúng, giống như khi bạn không tập trung vào mắt. Tham số "bán kính" ảnh hưởng đến số lượng pixel trên màn hình bị pha trộn với nhau, do đó giá trị lớn hơn sẽ tạo ra độ mờ nhiều hơn. Tất nhiên, nếu không, hình ảnh sẽ không thay đổi.
- drop-shadow(shadow)
- Thật tuyệt khi có thể tạo nội dung như thể đang đứng ngoài trời và có bóng đổ trên mặt đất phía sau, và đó chính là tính năng của "đổ bóng đổ". Công cụ này chụp nhanh hình ảnh, làm cho hình ảnh trở thành một màu duy nhất, làm mờ rồi bù trừ kết quả một chút để hình ảnh trông giống như bóng của nội dung gốc. Thông số "Bóng" được truyền vào phức tạp hơn một chút so với việc chỉ một giá trị. Đây là một chuỗi giá trị được phân tách bằng dấu cách – và một số giá trị cũng không bắt buộc! Giá trị "Bóng" kiểm soát vị trí đặt bóng, mức độ mờ, màu của bóng, v.v. Để biết đầy đủ thông tin chi tiết về chức năng của giá trị "đổ bóng", thông số kỹ thuật Nền CSS3 xác định rất chi tiết về "đổ bóng hộp". Một vài ví dụ dưới đây sẽ giúp bạn hiểu rõ về những khả năng khác nhau.
Đây là một thao tác lọc khác tương tự như chức năng CSS hiện có thông qua thuộc tính "box-shadow". Sử dụng phương pháp lọc có nghĩa là một số trình duyệt có thể tăng tốc phần cứng của phần cứng như chúng tôi đã mô tả cho thao tác "độ mờ" ở trên.
- url tham chiếu đến bộ lọc SVG
- Vì bộ lọc có nguồn gốc từ SVG, nên việc bạn có thể tạo kiểu cho nội dung của mình bằng bộ lọc SVG là hợp lý. Bạn có thể làm việc này dễ dàng với đề xuất thuộc tính "bộ lọc" hiện tại. Tất cả các bộ lọc trong SVG đều được xác định bằng thuộc tính "id" có thể dùng để tham chiếu hiệu ứng bộ lọc. Vì vậy, để sử dụng bất kỳ bộ lọc SVG nào từ CSS, bạn chỉ cần tham chiếu bộ lọc đó bằng cú pháp "url".
Ví dụ: mã đánh dấu SVG cho một bộ lọc có thể là:
<filter id="foo">...</filter>
thì với CSS, bạn có thể làm việc gì đó đơn giản như:
div { { % mixin filter: url(#foo); % } }
và voila! Tất cả các <div> trong tài liệu của bạn sẽ được tạo kiểu theo định nghĩa bộ lọc SVG.
- tuỳ chỉnh (sắp ra mắt)
- Sắp ra mắt các bộ lọc tuỳ chỉnh. Những thiết bị này khai thác sức mạnh của GPU đồ hoạ để sử dụng một ngôn ngữ tô bóng đặc biệt nhằm tạo ra những hiệu ứng đáng kinh ngạc mà bạn chỉ có thể quyết định dựa vào trí tưởng tượng của riêng mình. Phần này của đặc tả "bộ lọc" vẫn đang được thảo luận và thông số, nhưng ngay khi phần này bắt đầu xuất hiện trên một trình duyệt ở gần bạn, chúng tôi chắc chắn sẽ viết nhiều hơn về những gì có thể thực hiện.
Xem xét hiệu suất
Một điều mà mọi nhà phát triển web đều quan tâm là hiệu suất của trang web hoặc ứng dụng của họ. Bộ lọc CSS là một công cụ mạnh mẽ để tạo hiệu ứng hình ảnh, nhưng đồng thời cũng có thể tác động đến hiệu suất của trang web.
Việc hiểu được chức năng của các SDK này và mức độ ảnh hưởng của chúng đến hiệu suất là rất quan trọng, đặc biệt là khi bạn muốn trang web của mình hoạt động tốt trên thiết bị di động nếu chúng hỗ trợ bộ lọc CSS.
Trước hết, không phải tất cả các bộ lọc đều được tạo như nhau! Trên thực tế, hầu hết các bộ lọc sẽ chạy rất nhanh trên mọi nền tảng và có tác động rất nhỏ về hiệu suất. Tuy nhiên, các bộ lọc thực hiện bất kỳ loại làm mờ nào có xu hướng chậm hơn các bộ lọc khác. Tất nhiên là "làm mờ" và "đổ bóng đổ". Điều này không có nghĩa là bạn không nên sử dụng công cụ này, mà hãy hiểu rõ cách hoạt động của chúng có thể giúp ích cho bạn.
Khi bạn thực hiện blur, công cụ này sẽ kết hợp màu của các pixel xung quanh pixel đầu ra để tạo ra một kết quả được làm mờ. Giả sử nếu tham số radius của bạn là 2, thì bộ lọc cần xem xét 2 pixel theo mọi hướng xung quanh mỗi pixel đầu ra để tạo màu hỗn hợp. Điều này xảy ra với mỗi pixel đầu ra, vì vậy, nhiều phép tính sẽ trở nên lớn hơn khi bạn tăng radius. Vì blur xem xét theo mọi hướng, nên tăng gấp đôi "bán kính" đồng nghĩa với việc bạn cần xem xét số lượng pixel nhiều gấp 4 lần nên trên thực tế, mỗi lần tăng gấp đôi radius, tốc độ này chậm hơn 4 lần. Bộ lọc drop-shadow chứa blur do có tác động nên bộ lọc này cũng sẽ hoạt động giống như blur khi bạn thay đổi các phần radius và spread của tham số shadow.
blur không mất đi tất cả vì trên một số nền tảng, bạn có thể sử dụng GPU để tăng tốc, nhưng không nhất thiết phải có sẵn trong mọi trình duyệt. Khi nghi ngờ, điều tốt nhất là thử nghiệm với "bán kính" mang lại cho bạn hiệu ứng mà bạn muốn, sau đó cố gắng giảm hiệu ứng càng nhiều càng tốt trong khi vẫn duy trì hiệu ứng hình ảnh có thể chấp nhận được. Điều chỉnh theo cách này sẽ làm cho người dùng hài lòng hơn, đặc biệt khi họ sử dụng trang web của bạn trên điện thoại.
Nếu bạn đang dùng các bộ lọc dựa trên url tham chiếu đến bộ lọc SVG, thì chúng có thể chứa bất kỳ hiệu ứng bộ lọc tuỳ ý nào. Vì vậy, hãy lưu ý rằng các bộ lọc này cũng có thể chậm. Vì vậy, hãy cố gắng đảm bảo bạn biết hiệu ứng bộ lọc có tác dụng gì và thử nghiệm trên thiết bị di động để đảm bảo hiệu suất ổn.
Khả năng sử dụng trong các trình duyệt hiện đại
Hiện tại, một số hiệu ứng CSS filter đang được cung cấp trong trình duyệt dựa trên WebKit và Mozilla. Chúng tôi hy vọng sẽ sớm được thấy các phiên bản này trên Opera cũng như IE10. Vì chúng tôi vẫn đang phát triển quy cách nên một số nhà cung cấp trình duyệt đã triển khai nội dung này bằng cách sử dụng tiền tố nhà cung cấp. Vì vậy, trong WebKit, bạn cần sử dụng -webkit-filter, trong Mozilla, bạn sẽ cần sử dụng -moz-filter và chú ý đến các cách triển khai trình duyệt khác khi chúng xuất hiện.
Không phải trình duyệt nào cũng hỗ trợ tất cả hiệu ứng bộ lọc ngay lập tức, vì vậy quãng đường bạn đã đi sẽ thay đổi. Hiện tại, trình duyệt Mozilla chỉ hỗ trợ hàm filter: url() mà không cần tiền tố nhà cung cấp, vì việc triển khai đó có trước các hàm hiệu ứng khác.
Chúng tôi đã tóm tắt các tác động của bộ lọc CSS có trong các trình duyệt khác nhau bên dưới cùng với các chỉ báo hiệu suất tương đối về thời điểm các bộ lọc này được triển khai trong phần mềm. Lưu ý rằng một số trình duyệt hiện đại đang bắt đầu triển khai những trình duyệt này trong phần cứng (đã tăng tốc GPU). Khi các tính năng này được xây dựng với sự hỗ trợ của GPU, hiệu suất sẽ được cải thiện đáng kể đối với các hiệu ứng chậm hơn. Như thường lệ, thử nghiệm trên các trình duyệt khác nhau là cách tốt nhất để đánh giá hiệu suất.
| Hiệu ứng bộ lọc | Hỗ trợ trình duyệt | Hiệu suất |
|---|---|---|
| màu xám | Chrome | rất nhanh |
| màu nâu đỏ | Chrome | rất nhanh |
| làm rực màu | Chrome | rất nhanh |
| xoay màu | Chrome | nhanh |
| đảo ngược | Chrome | rất nhanh |
| opacity | Chrome | có thể chậm |
| độ sáng | Chrome | nhanh |
| tương phản | Chrome | nhanh |
| làm mờ | Chrome | chậm trừ phi tăng tốc |
| drop-shadow | Chrome | có thể chậm |
| URL() | Chrome, Mozilla | Thay đổi, nhanh hoặc chậm |
Các tài nguyên hữu ích khác
Ứng dụng vẽ trừu tượng tương tác có bộ lọc tuyệt vời cho phép bạn thử nghiệm và chia sẻ tác phẩm nghệ thuật của mình Hãy nhớ xem trang bộ lọc tương tác tuyệt vời của Eric Bidelman Hướng dẫn tuyệt vời về bộ lọc kèm theo các ví dụ Thông số kỹ thuật bản nháp W3C Filter 1.0 chính thức http://dev.w3.org/fxtf/filters/ Ví dụ: Giao diện người dùng được tạo bằng bộ lọc