Bộ lọc CSS

Cách làm việc với CSSfilterbất động sản

Bộ lọc cho phép chúng tôi thực hiện các hoạt động trên các phần tử.

Những việc bạn thường làm với Photoshop hoặc phần mềm chỉnh sửa ảnh khác, như thay đổi độ mờ hoặc độ sáng, v.v.

Bạn sử dụngfilterbất động sản. Đây là một ví dụ về nó được áp dụng trên một hình ảnh, nhưng thuộc tính này có thể được sử dụng trênbất kìthành phần:

img {
  filter: <something>;
}

Bạn có thể sử dụng các giá trị khác nhau ở đây:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()
  • url()

Chú ý dấu ngoặc đơn sau mỗi tùy chọn, vì chúng đều yêu cầu một tham số.

Ví dụ:

img {
  filter: opacity(0.5);
}

có nghĩa là hình ảnh sẽ trong suốt 50%, bởi vìopacity()nhận một giá trị từ 0 đến 1 hoặc một tỷ lệ phần trăm.

Bạn cũng có thể áp dụng nhiều bộ lọc cùng một lúc:

img {
  filter: opacity(0.5) blur(2px);
}

Bây giờ chúng ta hãy nói chi tiết về từng bộ lọc.

blur()

Làm mờ nội dung phần tử. Bạn chuyển cho nó một giá trị, được thể hiện bằngpxhoặc làemhoặc làremsẽ được sử dụng để xác định bán kính mờ.

Thí dụ:

img {
  filter: blur(4px);
}

opacity()

opacity()nhận một giá trị từ 0 đến 1 hoặc một tỷ lệ phần trăm và xác định độ trong suốt của hình ảnh dựa trên giá trị đó.

0, hoặc là0%, có nghĩa là hoàn toàn minh bạch.1, hoặc là100%, hoặc cao hơn, có nghĩa là hoàn toàn có thể nhìn thấy.

Thí dụ:

img {
  filter: opacity(0.5);
}

CSS cũng có mộtopacitybất động sản.filtertuy nhiên có thể được tăng tốc phần cứng, tùy thuộc vào việc triển khai, vì vậy đây nên là phương pháp ưu tiên.

drop-shadow()

drop-shadow()hiển thị bóng phía sau phần tử, theo sau kênh alpha. Điều này có nghĩa là nếu bạn có một hình ảnh trong suốt, bạn sẽ có một bóng đổ được áp dụng cho hình dạng hình ảnh, không phải hộp hình ảnh. Nếu hình ảnh không có kênh alpha, bóng sẽ được áp dụng cho toàn bộ hộp hình ảnh.

Nó chấp nhận tối thiểu 2 tham số, tối đa 5:

  • offset-xđặt độ lệch ngang. Có thể là tiêu cực.
  • offset-yđặt độ lệch dọc. Có thể là tiêu cực.
  • bán kính mờ, tùy chọn, đặt bán kính mờ cho bóng. Nó mặc định là 0, không bị mờ.
  • bán kính trải rộng, tùy chọn, đặt bán kính lây lan. Thể hiện trongpx,remhoặc làem
  • màu sắc, tùy chọn, đặt màu của bóng.

Bạn có thể đặt màu mà không cần đặt bán kính lan truyền hoặc bán kính mờ. CSS hiểu giá trị là màu sắc chứ không phải giá trị độ dài.

Thí dụ:

img {
  filter: drop-shadow(10px 10px 5px orange);
}
img {
  filter: drop-shadow(10px 10px orange);
}
img {
  filter: drop-shadow(10px 10px 5px 5px #333);
}

grayscale()

Làm cho phần tử có màu xám.

Bạn chuyển một giá trị từ 0 đến 1 hoặc từ 0% đến 100%, trong đó 1 và 100% có nghĩa là hoàn toàn màu xám và 0 hoặc 0% có nghĩa là hình ảnh không bị chạm và các màu gốc vẫn còn.

Thí dụ:

img {
  filter: grayscale(50%);
}

sepia()

Làm cho phần tử có màu nâu đỏ.

Bạn chuyển một giá trị từ 0 đến 1 hoặc từ 0% đến 100%, trong đó 1 và 100% có nghĩa là hoàn toàn màu nâu đỏ và 0 hoặc 0% có nghĩa là hình ảnh không bị chạm và vẫn giữ nguyên màu sắc ban đầu.

Thí dụ:

img {
  filter: sepia(50%);
}

invert()

Đảo ngược màu sắc của một phần tử. Đảo ngược một màu có nghĩa là tìm kiếm màu đối diện trong bánh xe màu HSL. Chỉ cần tìm kiếm "bánh xe màu" trong Google nếu bạn không biết điều đó có nghĩa là gì. Ví dụ, đối lập với màu vàng là xanh lam, đối lập với đỏ là lục lam. Mỗi màu đều có một sự đối lập.

Bạn chuyển một số, từ 0 đến 1 hoặc từ 0% đến 100%, xác định lượng nghịch đảo. 1 hoặc 100% có nghĩa là đảo ngược hoàn toàn, 0 hoặc 0% có nghĩa là không đảo ngược.

0,5 hoặc 50% sẽ luôn hiển thị 50% màu xám, vì bạn luôn ở giữa bánh xe.

Thí dụ:

img {
  filter: invert(50%);
}

hue-rotate()

Bánh xe màu HSL được biểu thị bằng độ. Sử dụnghue-rotate()bạn có thể xoay màu bằng cách xoay âm hoặc dương.

Hàm chấp nhận mộtdeggiá trị.

Thí dụ:

img {
  filter: hue-rotate(90deg);
}

brightness()

Làm thay đổi độ sáng của một phần tử.

0 hoặc 0% cho tổng phần tử màu đen. 1 hoặc 100% cho hình ảnh không thay đổi

Giá trị cao hơn 1 hoặc 100% làm cho hình ảnh sáng hơn để đạt được tổng phần tử màu trắng.

Thí dụ:

img {
  filter: brightness(50%);
}

contrast()

Làm thay đổi độ tương phản của một phần tử.

0 hoặc 0% cho tổng phần tử màu xám. 1 hoặc 100% cho hình ảnh không thay đổi

Giá trị cao hơn 1 hoặc 100% cho độ tương phản cao hơn.

Thí dụ:

img {
  filter: contrast(150%);
}

saturate()

Thay đổi độ bão hòa của một phần tử.

0 hoặc 0% cho tổng phần tử thang độ xám (với độ bão hòa ít hơn). 1 hoặc 100% cho hình ảnh không thay đổi

Giá trị cao hơn 1 hoặc 100% sẽ bão hòa hơn.

Thí dụ:

img {
  filter: saturate();
}

url()

Bộ lọc này cho phép áp dụng bộ lọc được xác định trong tệp SVG. Bạn trỏ đến vị trí tệp SVG.

Thí dụ:

img {
  filter: url(filter.svg);
}

Bộ lọc SVG nằm ngoài phạm vi của cuốn sách này, nhưng bạn có thể đọc thêm trên bài đăng trên Tạp chí Smashing này:https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: