Tìm hiểu các tác động của bộ lọc CSS

Giới thiệu

Bộ lọc là một công cụ mạnh mẽ mà các tác giả web có thể sử dụng để tạo ra cá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ề quá trình phát triển của các hiệu ứng bộ lọc, chức năng của các hiệu ứng này và cách sử dụng. Chúng ta sẽ trình bày ví dụ về tất cả các bộ lọc được xác định trước cho CSS với một số ví dụ. Chúng ta cũng sẽ đề cập đến các điểm cần cân nhắc về hiệu suất khi sử dụng bộ lọc trên máy tính và thiết bị di động vì việc biết được tác động của 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 hiệu ứng bộ lọc

Hiệu ứng bộ lọc bắt nguồn từ quy cách của Đồ hoạ vectơ có thể mở rộng (SVG). Các lớp này được tạo để áp dụng một số hiệu ứng hình ảnh dựa trên pixel khác nhau cho bản vẽ vectơ. Theo thời gian, khi các nhà cung cấp trình duyệt thêm chức năng SVG vào trình duyệt của họ, lợi ích của bộ lọc trở nên rõ ràng. Robert O’Callahan đến từ Mozilla đã nảy ra ý tưởng tuyệt vời về việc sử dụng bộ lọc SVG thông qua việc áp dụng CSS đối với nội dung HTML "thông thường". Robert đã tạo bản nguyên mẫu cho một phiên bản ban đầu cho thấy sự kết hợp mạnh mẽ giữa bộ lọc và kiểu CSS. Các nhóm làm việc về CSS và SVG trong W3C đã quyết định điều chỉnh việc sử dụng bộ lọc cho cả HTML và SVG thông qua tính năng định kiểu CSS. Nhờ đó, thuộc tính "filter" (bộ lọc) cho CSS đã ra đời. Hiện tại, một nhóm tác vụ chung gồm những người làm việc trên CSS và SVG đang làm rất nhiều việc để giúp bộ lọc trở nên hữu ích trên mọi nền tảng. Bạn có thể tìm thấy thông số kỹ thuật hiện tại cho toàn bộ nội dung này tại đây.

Thuộc tính CSS "filter" (bộ lọc) có thêm nhiều tính năng mới

Đôi khi, nhà phát triển web sẽ gặp phải hiện tượng Deja Vu khi thấy "bộ lọc" trong các kiểu CSS. Lý do là các phiên bản Internet Explorer cũ có thuộc tính "bộ lọc" hiển thị thông qua CSS để thực hiện một số chức năng cụ thể của nền tảng. Thuộc tính này đã ngừng hoạt động và thay vào đó là thuộc tính "filter" chuẩn, hiện là một phần của CSS3. Vì vậy, khi bạn thấy "bộ lọc" xuất hiệ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 "bộ lọc" mới là nơi diễn ra mọi 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 bộ lọc có chức năng gì? Cách dễ nhất để hiểu về bộ lọc là một bước xử lý hậu kỳ thực hiện một số thao tác kỳ diệu sau khi tất cả nội dung trên trang đã được bố trí và vẽ.

Khi tải một trang web, trình duyệt cần áp dụng các kiểu, thực hiện bố cục rồi hiển thị trang để có nội dung để xem. Bộ lọc sẽ hoạt động sau tất cả các bước đó và ngay trước khi trang được sao chép vào màn hình. Những gì chúng 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 thuật đồ hoạ trên các pixel trong ảnh chụp nhanh rồi vẽ kết quả lên đầu hình ảnh trang ban đầu. Bạn có thể coi các lớp phủ này giống như một bộ lọc được đặt ở mặt trước ống kính máy ảnh. Những gì bạn nhìn thấy qua ống kính là thế giới bên ngoài được điều chỉnh theo hiệu ứng của bộ lọc.

Tất nhiên, điều này có nghĩa là sẽ mất thời gian khi vẽ một trang có bộ lọc, nhưng việc sử dụng bộ lọc đúng cách sẽ tác động tối thiểu đến tốc độ của trang web.

Ngoài ra, giống như cách 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 một số lượng bộ lọc tuỳ ý, lần lượt để đạt được mọi loại hiệu ứng.

Bộ lọc được xác định bằng SVG và CSS

Vì bộ lọc ban đầu đến từ SVG, nên có nhiều cách để xác định và sử dụng bộ lọc. Bản thân SVG có phần tử <filter> bao bọc định nghĩa của nhiều hiệu ứng bộ lọc bằng cú pháp XML. Bộ bộ lọc do CSS xác định tận dụng cùng một mô hình đồ hoạ, nhưng các bộ lọc này là các định nghĩa đơn giản hơn nhiều và dễ sử dụng trong một trang kiểu.

Hầu hết các bộ lọc CSS đều có thể được biểu thị bằ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 muốn. Các nhà thiết kế bộ lọc CSS đã rất nỗ lực để giúp 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, tạm thời 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 từ CSS được thực hiện bằng cách sử dụng thuộc tính "bộ lọc" được áp dụng cho bất kỳ phần tử hiển thị nào trên trang web của bạn. Với một ví dụ rất đơn giản, bạn có thể viết những câu như

div { { % mixin filter: grayscale(100%); % } }

và điều đó sẽ khiến nội dung bên trong tất cả phần tử <div> trên trang chuyển sang màu xám. Rất phù hợp để trang của bạn trông giống như hình ảnh trên TV từ những năm 1940.

Hầu hết các bộ lọc đều có một dạng tham số nào đó để kiểm soát mức độ lọc được thực hiện. Ví dụ: nếu muốn tạo kiểu cho nội dung của mình ở giữa màu gốc và phiên bản thang màu xám, bạn sẽ thực hiện như sau:

div { { % mixin filter: grayscale(50%); % } }

Nếu bạn muốn áp dụng nhiều bộ lọc khác nhau lần lượt, bạn chỉ cần sắp xếp các bộ lọc đó theo thứ tự trong CSS như sau:

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

Trước tiên, ví dụ đó sẽ chuyển tất cả màu gốc sang thang màu xám, sau đó áp dụng hiệu ứng màu nâu đỏ và kết quả cuối cùng sẽ có dạng như sau:

Với khả năng linh hoạt trong việc áp dụng bộ lọc lần lượt, bạn có thể tạo ra mọi loại hiệu ứng – tất cả đều phụ thuộc vào trí tưởng tượng của bạn để thử nghiệm và tạo ra kết quả tuyệt vời.

Các hiệu ứng bộ lọc có sẵn bằng CSS

Vì vậy, cơ chế bộ lọc SVG ban đầu vừa mạnh mẽ nhưng đồng thời cũng có thể gây khó khăn cho việc sử dụng. Do đó, CSS giới thiệu một loạt hiệu ứng bộ lọc tiêu chuẩn giúp bạn dễ dàng sử dụng.

Hãy cùng tìm hiểu từng loại chiến dịch và xem chức năng của chúng.

grayscale(amount)

Thao tác này sẽ chuyển đổi màu trong hình ảnh đầu vào thành một sắc thái màu xám. "Số lượng" được áp dụng sẽ kiểm soát mức độ chuyển đổi màu xám được áp dụng. Nếu giá trị này là 100% thì mọi thứ sẽ có màu xám, còn nếu 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 muốn sử dụng số này thay vì 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%.

sepia(amount)

Thao tác này sẽ tạo ra màu sắc được truyền trong sắc thái nâu đỏ như trong ảnh cũ. "Lượng" được áp dụng hoạt động giống như đối với bộ lọc "thang màu xám" – cụ thể là 100% làm cho tất cả màu sắc đều có tông màu nâu đỏ và các giá trị nhỏ hơn cho phép áp dụng hiệu ứng theo tỷ lệ nhỏ hơn.

saturate(amount)

Thao tác này áp dụng hiệu ứng bão hoà màu cho các màu, giúp các màu đó trông sống động hơn. Đây là một hiệu ứng thú vị có thể làm cho ảnh trông giống như áp phích hoặc ảnh hoạt hình. Hiệu ứng này cũng cho phép bạn sử dụng giá trị lớn hơn 100% để thực sự làm nổi bật độ bão hoà. Đây chắc chắn là một hiệu ứng có thể khiến mọi thứ trông khá thú vị!

hue-rotate(góc)

Đây là một hiệu ứng màu sắc có thể dùng để tạo ra những kết quả thú vị. Hàm này sẽ dịch chuyển các màu 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ể tưởng tượng một phổ màu đi từ màu đỏ sang màu tím xung quanh bánh xe màu, thì hiệu ứng này sẽ lấy màu gốc trên bánh xe làm dữ liệu đầu vào và xoay màu đó theo thông số "góc" để tạo ra màu sắc trên bánh xe mà nó xoay làm giá trị màu đầu ra. Vì vậy, tất cả màu sắc trong hình ảnh đều được dịch chuyển theo cùng một "góc" trên bánh xe. Tất nhiên, đây là cách đơn giản hoá chức năng của lớp này, nhưng hy vọng là đủ gần để có thể hiểu được.

invert(amount)

Hiệu ứng này thay đổi màu sắc để nếu "số lượng" được áp dụng là 100%, kết quả sẽ trông giống như một bức ảnh âm bản từ thời sử dụng máy ảnh thời xưa! Giống như trước đây, việc sử dụng các giá trị nhỏ hơn 100% sẽ áp dụng hiệu ứng đảo ngược một cách dần dần.

opacity(amount)

Nếu bạn muốn nội dung đang được lọc có dạng nửa trong suốt, thì đây là hiệu ứng dành cho bạn. Giá trị "amount" xác định mức độ mờ đục của kết quả. Vì vậy, giá trị 100% hoàn toàn mờ đục nên đầu ra sẽ giống hệt với dữ liệu đầu vào. Khi giá trị giảm xuống dưới 100%, hình ảnh đầu ra sẽ trở nên 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 lớp phủ này chồng lên một nội dung khác trên trang, thì nội dung bên dưới sẽ bắt đầu hiển thị. "Số lượng" bằng 0% có nghĩa là đối tượng sẽ biến mất hoàn toàn. Tuy nhiên, xin lưu ý rằng bạn vẫn có thể nhận được các sự kiện như lượt nhấp chuột, v.v. trên các đối tượng hoàn toàn trong suốt. Vì vậy, tính năng này rất hữu ích nếu bạn muốn tạo các vùng có thể nhấp mà không hiển thị bất kỳ nội dung nào.

Cách này hoạt động giống như thuộc tính "độ mờ" mà bạn đã biết. Nhìn 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 bằ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 của độ mờ để có hiệu suất tốt hơn nhiều.

brightness(amount)

Tính năng này giống như chế độ đ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 tương ứng với thông số "amount". Nếu đặt giá trị này thành 0%, bạn sẽ chỉ thấy màu đen. Tuy nhiên, khi giá trị này tăng lên 100%, bạn sẽ thấy hình ảnh gốc sáng dần lên cho đến khi đạt đến 100%, tức là hình ảnh đó giống với hình ảnh đầu vào. Tất nhiên, bạn có thể tiếp tục tăng – vì vậy, việc đặt giá trị như 200% sẽ làm cho hình ảnh sáng gấp đôi so với hình ảnh gốc – rất phù hợp để điều chỉnh những bức ảnh chụp thiếu sáng!

tương phản(số lượng)

Có nhiều chế độ điều khiển hơn trên TV! Thao tác này sẽ điều chỉnh sự chênh lệch giữa phần tối nhất và sáng nhất của hình ảnh nhập vào. Nếu sử dụng 0%, bạn sẽ có màu đen giống như với "độ sáng", vì vậy, không quá thú vị. Tuy nhiên, khi bạn tăng giá trị lên 100%, độ chênh lệch về độ tối sẽ thay đổi cho đến khi bạn đạt đến 100% và hình ảnh sẽ trở lại như ban đầu. Bạn cũng có thể tăng mức độ này lên trên 100% để tăng sự khác biệt giữa màu sáng và màu tối.

blur(bán kính)

Nếu muốn nội dung có cạnh mềm, bạn có thể thêm hiệu ứng làm mờ. Kiểu này trông giống như hiệu ứng Vaseline cổ điển trên tấm kính, từng là một kỹ thuật làm phim phổ biến. Hiệu ứng này làm nhòe tất cả các màu với nhau và lan toả hiệu ứng của chúng – giống như khi mắt bạn không tập trung. Tham số "radius" (bán kính) ảnh hưởng đến số lượng pixel trên màn hình kết hợp với nhau, vì vậy, giá trị lớn hơn sẽ tạo ra nhiều hiệu ứng làm mờ hơn. Tất nhiên là không thì hình ảnh sẽ không thay đổi.

bóng đổ(bóng)

Thật tuyệt vời khi có thể biến nội dung của bạn trông giống như đang ở ngoài trời nắng với bóng đổ xuống phía sau, và tất nhiên đây cũng là lợi ích của phương pháp "trận bóng đổ". Phương thức này sẽ chụp nhanh hình ảnh, chuyển hình ảnh thành một màu duy nhất, làm mờ hình ảnh, sau đó dịch chuyển kết quả một chút để trông giống như bóng của nội dung ban đầu. Tham số "shadow" (bóng) được truyền vào phức tạp hơn một chút so với một giá trị đơn lẻ. Đây là một chuỗi các 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ị "shadow" (bóng đổ) kiểm soát vị trí đặt bóng đổ, mức độ làm mờ, màu của bóng đổ, v.v. Để biết toàn bộ thông tin chi tiết về chức năng của các giá trị "shadow", thông số kỹ thuật Nền CSS3 xác định "box-shadow" một cách chi tiết. Một vài ví dụ dưới đây sẽ giúp bạn hiểu rõ về những khả năng có thể xảy ra.

Đâ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". Việc sử dụng phương pháp bộ lọc có nghĩa là một số trình duyệt có thể tăng tốc phần cứng cho phương pháp này như chúng ta đã mô tả cho thao tác "độ mờ" ở trên.

url tham chiếu đến bộ lọc SVG

Vì các bộ lọc bắt nguồn từ định dạng SVG nên việc bạn có thể định kiểu cho nội dung bằng bộ lọc SVG là hợp lý. Bạn có thể dễ dàng thực hiện việc này bằng đề xuất thuộc tính "bộ lọc" hiện tại. Tất 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ể có dạng như sau:

<filter id="foo">...</filter>

sau đó, từ CSS, bạn có thể làm một việc đơn giản như:

div { { % mixin filter: url(#foo); % } }

và thế là xong! Tất cả <div> trong tài liệu của bạn sẽ được tạo kiểu bằng các định nghĩa bộ lọc SVG.

tuỳ chỉnh (sắp ra mắt)

Sắp ra mắt bộ lọc tuỳ chỉnh. Các công cụ này tận dụng sức mạnh của GPU đồ hoạ để sử dụng ngôn ngữ bóng đổ đặc biệt nhằm tạo ra các hiệu ứng tuyệt vời chỉ bị giới hạn bởi trí tưởng tượng của bạn. Phần này của thông số kỹ thuật "bộ lọc" vẫn đang được thảo luận và thay đổi, nhưng ngay khi tính năng 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 thêm về những gì có thể.

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ể ảnh hưởng đến hiệu suất của trang web.

Việc hiểu rõ tác vụ và tác động của điều này đế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 tiên, không phải bộ lọc nào cũng được tạo ra 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ỏ đến hiệu suất. Tuy nhiên, các bộ lọc làm mờ thường có tốc độ chậm hơn so với các bộ lọc khác. Tất nhiên, đây là "blur" (làm mờ) và "drop-shadow" (bóng đổ). Điều này không có nghĩa là bạn không nên sử dụng các hiệu ứng này, nhưng việc hiểu 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, phương thức này sẽ kết hợp các màu từ các pixel xung quanh pixel đầu ra để tạo ra kết quả mờ. Vì vậy, 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 kết hợp. Việc này xảy ra cho mỗi pixel đầu ra, vì vậy, có nghĩa là nhiều phép tính sẽ lớn hơn khi bạn tăng radius. Vì blur nhìn theo mọi hướng, nên việc tăng gấp đôi "bán kính" có nghĩa là bạn cần xem xét nhiều pixel hơn gấp 4 lần, vì vậy, trên thực tế, mỗi lần tăng gấp đôi radius sẽ chậm hơn 4 lần. Bộ lọc drop-shadow chứa blur như một phần của hiệu ứng, vì vậy, bộ lọc này cũng 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 vẫn có thể hoạt động trên một số nền tảng nhờ GPU, nhưng không phải trình duyệt nào cũng có GPU. Khi không chắc chắn, tốt nhất bạn nên thử nghiệm với "bán kính" để có được hiệu ứng mong muốn, sau đó cố gắng giảm bán kính càng nhiều càng tốt trong khi vẫn duy trì hiệu ứng hình ảnh chấp nhận được. Việc điều chỉnh theo cách này sẽ giúp người dùng hài lòng hơn, đặc biệt là khi họ sử dụng trang web của bạn trên điện thoại.

Nếu bạn đang sử dụng các bộ lọc dựa trên url tham chiếu đến bộ lọc SVG, thì các bộ lọc này 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 chúng cũng có thể chậm. Vì vậy, hãy cố gắng đảm bảo rằng 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.

Có sẵn trong các trình duyệt hiện đại

Hiện tại, một số hiệu ứng filter CSS đang được cung cấp trong các trình duyệt dựa trên WebKit và Mozilla. Chúng tôi dự kiến sẽ sớm thấy các tính năng này trong Opera cũng như IE10. Do thông số kỹ thuật vẫn đang được phát triển nên một số nhà cung cấp trình duyệt đã triển khai tính năng 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 phương thức 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, hiệu quả sử dụng sẽ khác nhau. Hiện tại, trình duyệt Mozilla chỉ hỗ trợ hàm filter: url() – không có tiền tố của nhà cung cấp, vì cách 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 hiệu ứng bộ lọc CSS có trong nhiều trình duyệt bên dưới cùng với các chỉ báo hiệu suất sơ bộ khi các hiệu ứng này được triển khai trong phần mềm. Xin lưu ý rằng một số trình duyệt hiện đại đang bắt đầu triển khai các tính năng này trong phần cứng (tăng tốc GPU). Khi các hiệu ứng này được tạo bằng tính năng hỗ trợ 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.

Các tài nguyên hữu ích khác

Ứng dụng vẽ tranh trừu tượng tương tác bằng 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 ví dụ Quy cách bản nháp Hiệu ứng bộ lọc 1.0 chính thức của W3C http://dev.w3.org/fxtf/filters/ Ví dụ về giao diện người dùng được tạo bằng bộ lọc