CSS Filters là một công cụ mạnh mẽ giúp cho bạn có thể đạt được các hiệu ứng về hình ảnh đa dạng hơn trước khi hiển thị ra cho người dùng. Thuộc tính này thường được sử dụng để điều chỉnh một image, một background hoặc là một border.

Cú pháp cơ bản là:

Trong đó, các filter-function sẽ có một trong các giá trị dưới:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() – áp dụng cho SVG filters

Bạn có thể sử dụng cùng lúc 2 hoặc nhiều filter-function, chúng sẽ được ngăn cách nhau bởi khoảng trắng.
Dưới đây là cách sử dụng 1 filter đơn giản:

Còn đây là ví dụ về sử dụng nhiều filter-function:

Cách sử dụng từng Filter Function

Để thuộc tính CSS filter được áp dụng một cách chính xác, bạn cần chỉ ra 1 trong các giá trị filter-function trong danh sách bên trên. Nếu bạn điền sai giá trị, nó sẽ trả về giá trị “none”.

Chú ý: Với những function có giá trị trả về theo dạng phần trăm (ví dụ 69%) thì bạn cũng có thể khai báo nó dưới dạng thập phân (như 0.69).

Bây giờ, chúng ta sẽ đi vào chi tiết từng function. Tôi có demo cho tất cả các function dưới đây:

See the Pen CSS3 filter property by huy kon (@huykon225) on CodePen.26877

grayscale()

Hình ảnh được chuyển sang gam màu xám tùy thuộc vào giá trị mà bạn nhập vào. Giá trị 100% là xám hoàn toàn, giá trị 0% sẽ giữ nguyên hình ảnh ban đầu. Hình ảnh sẽ thay đổi dần trong giá trị từ 0% đến 100%. Nếu giá trị bạn nhập vào không đúng thì filter này sẽ nhận giá trị 100%. Không cho phép giá trị âm.

sepia()

Hình ảnh được chuyển sang gam màu nâu đỏ phụ thuộc vào giá trị sepia bạn nhập vào. Giá trị 0% sẽ giữ nguyên hình ảnh ban đầu còn 100% sẽ chuyển đổi hình ảnh sang màu nâu đỏ. Nếu giá trị bạn nhập vào không đúng thì filter này sẽ nhận giá trị 100% và cũng không cho phép giá trị âm.

saturate()

Hiệu ứng gây bão hòa màu sắc trong hình ảnh. Giá trị 0% sẽ cho ra hình ảnh chưa được bão hòa và giá trị 100% sẽ cho ra kết quả với hình ảnh như ban đầu. Cho phép giá trị trên 100% và nếu giá trị bạn điền vào không đúng nó sẽ nhận giá trị 100%. Cũng như các function bên trên thì filter này cũng k nhận giá trị âm.

hue-rotate()

Hiệu ứng xoay vòng màu sắc cho ảnh tùy thuộc vào góc độ bạn điền vào. 0deg sẽ không làm thay đổi hình ảnh, nếu bạn điền sai giá trị thì mặc định sẽ nhận giá trị 0deg này. Giá trị lớn nhất là 360deg.

invert()

Đảo ngược các gam màu trong hình ảnh theo giá trị bên trong invert. Giá trị 100% là biến đổi hoàn toàn còn 0% là giữ nguyên hình ảnh ban đầu. Giá trị truyền vào sai thì mặc định sẽ nhận 100% và không cho phép giá trị âm.

opacity()

Hình ảnh sẽ được làm trong suốt dựa vào giá trị mà bạn truyền vào trên trong opacity. Giá trị 0% sẽ cho ra hình ảnh trong suốt và 100% sẽ giữ nguyên hình ảnh ban đầu. Nhận giá trị 100% nếu bạn truyền sai giá trị vào đây (function này khá giống với css opacity thông thường) và giá trị âm không được chấp nhận.

brightness()

Hàm này tạo ra hiệu ứng hình ảnh nhiều sáng hơn. Nếu giá trị là 0% sẽ cho ra hình ảnh với hiệu ứng toàn đen. Giá trị 100% sẽ không tạo ra hiệu ứng cho hình ảnh và giá trị lớn hơn 100% được cho phép. Sai giá trị sẽ cho ra mặc định là 100%.

contrast()

Điều chỉnh độ tương phản tương ứng với giá trị nhập vào. Giá trị 0% sẽ cho ra hiệu ứng toàn màu đen và 100% sẽ không tạo ra bất cứ thay đổi gì. Giá trị hơn 100% được cho phép với ít độ tương phản hơn. Sai giá trị sẽ cho ra mặc định là 100%.

blur()

Hiệu ứng tạo ra độ mờ cho ảnh với giá trị length truyền vào. Nếu bạn không cung cấp giá trị thì mặc định sẽ nhận giá trị 0 cho nên bạn cần chỉ rõ độ blur theo đơn vị length và function này không nhận giá trị phần trăm (%).

drop-shadow()

Tạo ra hiệu ứng drop-shadow cho viền hình ảnh. Hiệu ứng này rất giống với 1 thuộc tính trong css3 là box-shadow nên bạn có thể tham khảo để biết thêm.

url()

Giá trị bên trong url sẽ là 1 file XML và chỉ ra SVG filter (Xem demo bên trên đầu bài viết bạn sẽ hiểu rõ hơn về nó).

Vậy là qua bài viết này bạn đã hiểu hơn về CSS Filters và áp dụng nó một cách nhuần nhuyễn. Tôi hi vọng bài viết hữu ích với tất cả mọi người, để lại comment ở khung bên dưới nếu bạn có bất kì thắc mắc muốn được giải đáp nhé !

2 BÌNH LUẬN

ĐỂ LẠI BÌNH LUẬN