Bộ lọc

Podcast CSS – 023: Bộ lọc

Giả sử bạn cần tạo một phần tử có độ mờ một chút, hiệu ứng kính mờ phủ lên trên hình ảnh. Văn bản phải là văn bản trực tiếp chứ không phải hình ảnh. Bạn làm được như thế nào?

Kết hợp bộ lọc CSS và backdrop-filter chúng tôi có thể áp dụng hiệu ứng và làm mờ những nội dung cần thiết theo thời gian thực. Làm mờ và độ mờ là hai trong số nhiều bộ lọc có sẵn, Vì vậy, hãy xem nhanh chức năng và cách sử dụng chúng.

Thuộc tính filter

Hỗ trợ trình duyệt

  • Chrome: 53.
  • Cạnh: 12.
  • Firefox: 35.
  • Safari: 9.1.

Nguồn

Bạn có thể áp dụng một hoặc nhiều bộ lọc sau đây làm giá trị cho filter. Nếu áp dụng sai bộ lọc, các bộ lọc còn lại được xác định cho filter sẽ không hoạt động.

blur

Thao tác này sẽ áp dụng hiệu ứng làm mờ gaussian và đối số duy nhất bạn có thể truyền là radius, tức là mức độ mờ được áp dụng. Đây phải là một đơn vị chiều dài, chẳng hạn như 10px. Tỷ lệ phần trăm không được chấp nhận.

.my-element {
    filter: blur(0.2em);
}

brightness

Hỗ trợ trình duyệt

  • Chrome: 18.
  • Cạnh: 12.
  • Firefox: 35.
  • Safari: 6.

Nguồn

Cách tăng hoặc giảm độ sáng của một phần tử: hãy sử dụng chức năng độ sáng. Giá trị độ sáng được biểu thị dưới dạng phần trăm, trong đó hình ảnh không thay đổi được biểu thị bằng giá trị 100%. Giá trị 0% sẽ chuyển hình ảnh thành màu đen hoàn toàn, nên giá trị trong khoảng từ 0% đến 100% sẽ làm cho hình ảnh kém sáng hơn. Sử dụng các giá trị trên 100% để tăng độ sáng.

.my-element {
    filter: brightness(80%);
}

contrast

Hỗ trợ trình duyệt

  • Chrome: 18.
  • Cạnh: 12.
  • Firefox: 35.
  • Safari: 6.

Nguồn

Đặt giá trị trong khoảng từ 0% đến 100% để giảm hoặc tăng độ tương phản tương ứng.

.my-element {
    filter: contrast(160%);
}

grayscale

Hỗ trợ trình duyệt

  • Chrome: 18.
  • Cạnh: 12.
  • Firefox: 35.
  • Safari: 6.

Nguồn

Bạn có thể áp dụng hiệu ứng thang màu xám hoàn toàn bằng cách dùng 1 làm giá trị cho grayscale(), hoặc 0 để có phần tử bão hoà hoàn toàn. Bạn cũng có thể dùng giá trị phần trăm hoặc giá trị thập phân để chỉ áp dụng một phần hiệu ứng thang màu xám. Nếu bạn không truyền đối số nào, phần tử này sẽ hoàn toàn có thang màu xám. Nếu bạn vượt qua một giá trị lớn hơn 100%, thì giá trị đó sẽ bị giới hạn ở mức 100%.

.my-element {
    filter: grayscale(80%);
}

invert

Hỗ trợ trình duyệt

  • Chrome: 18.
  • Cạnh: 12.
  • Firefox: 35.
  • Safari: 6.

Nguồn

Giống như grayscale, bạn có thể truyền 1 hoặc 0 vào hàm invert() để bật hoặc tắt. Khi bật, màu của phần tử sẽ đảo ngược hoàn toàn. Bạn cũng có thể sử dụng giá trị phần trăm hoặc giá trị thập phân để chỉ áp dụng đảo ngược một phần màu. Nếu bạn không truyền bất kỳ đối số nào vào hàm invert(), phần tử sẽ bị đảo ngược hoàn toàn.

.my-element {
    filter: invert(1);
}

opacity

Hỗ trợ trình duyệt

  • Chrome: 18.
  • Cạnh: 12.
  • Firefox: 35.
  • Safari: 6.

Nguồn

Bộ lọc opacity() hoạt động giống như thuộc tính opacity, nơi bạn có thể chuyển một số hoặc phần trăm để tăng hoặc giảm độ mờ. Nếu bạn không truyền đối số nào thì phần tử sẽ hiển thị đầy đủ.

.my-element {
    filter: opacity(0.3);
}

saturate

Hỗ trợ trình duyệt

  • Chrome: 18.
  • Cạnh: 12.
  • Firefox: 35.
  • Safari: 6.

Nguồn

Bộ lọc bão hoà rất giống với bộ lọc brightness và chấp nhận cùng một đối số: con số hoặc tỷ lệ phần trăm. Thay vì tăng hoặc giảm hiệu ứng độ sáng, saturate tăng hoặc giảm độ rực màu.

.my-element {
    filter: saturate(155%);
}

sepia

Hỗ trợ trình duyệt

  • Chrome: 18.
  • Cạnh: 12.
  • Firefox: 35.
  • Safari: 6.

Nguồn

Bạn có thể thêm hiệu ứng tông màu nâu đỏ bằng bộ lọc hoạt động như grayscale(). Tông màu nâu đỏ là một kỹ thuật in ảnh chuyển đổi tông màu đen thành tông màu nâu để tạo cảm giác ấm áp. Bạn có thể truyền một số hoặc phần trăm làm đối số cho sepia() để tăng hoặc giảm tác động. Thao tác truyền không đối số sẽ thêm hiệu ứng màu nâu đỏ đầy đủ (tương đương với sepia(100%)).

.my-element {
    filter: sepia(70%);
}

hue-rotate

Hỗ trợ trình duyệt

  • Chrome: 18.
  • Cạnh: 12.
  • Firefox: 35.
  • Safari: 6.

Nguồn

Bạn đã tìm hiểu cách màu sắc trong hsl tham chiếu đến chế độ xoay của bánh xe màu trong bài học về màu sắc và bộ lọc này hoạt động theo cách tương tự. Nếu bạn vượt qua một góc, chẳng hạn như độ hoặc rẽ, nó làm đổi màu của tất cả màu của các phần tử, thay đổi phần bánh xe màu tham chiếu. Nếu bạn không truyền đối số nào thì hàm này sẽ không thực hiện thao tác nào.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Hỗ trợ trình duyệt

  • Chrome: 18.
  • Cạnh: 12.
  • Firefox: 35.
  • Safari: 6.

Nguồn

Bạn có thể áp dụng bóng đổ ôm theo đường cong như cách bạn thực hiện trong công cụ thiết kế, chẳng hạn như Photoshop với drop-shadow. Bóng này được áp dụng cho mặt nạ alpha nên rất hữu ích trong việc thêm bóng vào hình ảnh cắt bỏ. Bộ lọc drop-shadow lấy tham số đổ bóng chứa các giá trị độ lệch-x, độ lệch-y, mờ và màu phân tách theo không gian. API này gần giống với box-shadow, nhưng từ khoá inset và giá trị trải rộng không được hỗ trợ.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Tìm hiểu thêm về các loại bóng trong mô-đun bóng.

url

Hỗ trợ trình duyệt

  • Chrome: 5.
  • Cạnh: 12.
  • Firefox: 3.
  • Safari: 6.

Nguồn

Bộ lọc url cho phép bạn áp dụng bộ lọc SVG từ một phần tử hoặc tệp SVG được liên kết. Bạn có thể đọc thêm về bộ lọc SVG tại đây

Bộ lọc phông nền

Hỗ trợ trình duyệt

  • Chrome: 76.
  • Cạnh: 79.
  • Firefox: 103.
  • Safari: 18.

Nguồn

Bộ lọc phông nền thuộc tính chấp nhận tất cả các giá trị hàm lọc giống như filter. Sự khác biệt giữa backdrop-filter và filter là thuộc tính backdrop-filter chỉ áp dụng các bộ lọc cho chế độ nền trong đó thuộc tính filter áp dụng cho toàn bộ phần tử.

Ví dụ ngay ở đầu bài học này là một ví dụ hoàn hảo, bởi vì bạn không muốn văn bản bị mờ và lý tưởng nhất là bạn không muốn phải thêm các phần tử HTML thừa. Chỉ có thể áp dụng bộ lọc cho phông nền sẽ giúp bạn làm được điều đó.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về bộ lọc

Mục nào sau đây là chức năng lọc CSS?

grayscale()
🎉
invert()
🎉
flip()
Hãy thử lại!
multiply()
Hãy thử lại!
blur()
🎉
brightness()
🎉

CSS có thể sử dụng bộ lọc SVG không?

Có
Hàm bộ lọc url() cho phép điều này
Không
Hãy thử lại!