Xử lý hiệu ứng hình ảnh tuyệt đẹp với CSS Filter effect!

Điều chỉnh độ sáng và độ tương phản của hình ảnh, hoặc biến hình ảnh thành đen trắng hoặc nâu đỏ là một tính năng phổ biến bạn có thể tìm thấy trong ứng dụng chỉnh sửa hình ảnh như Photoshop hoặc các ứng dụng chỉnh sửa ảnh trên smartphone. Nhưng giờ đây, các bạn có thể thêm các hiệu ứng tương tự vào hình ảnh trong trang web chỉ bằng CSS. Những tính năng này có được là nhờ thuộc tính Filter Effects của CSS3. Vậy hãy thử xem có gì thú vị nào 😀

1. Hiệu ứng đen trắng

img {
   -webkit-filter: grayscale(100%);
}

2. Hiệu ứng nâu đỏ

img {
   -webkit-filter: sepia(100%);
}

Cả hai giá trị sepia và grayscale được tính theo tỷ lệ phần trăm, trong đó 100% là mức tối đa và 0% đồng nghĩa với việc sẽ giữ cho hình ảnh không bị thay đổi, nhưng khi không set giá trị cụ thể nào, giá trị mặc định sẽ là 100%.

3. Hiệu ứng độ sáng

img {
  -webkit-filter: brightness(50%); 
}

4. Hiệu ứng tương phản

img {
  -webkit-filter: contrast(200%); 
}

Cả brightness và contrast khi set giá trị là 0% hình ảnh sẽ hoàn toàn bị che mờ và 100% thì hình ảnh sẽ như ảnh gốc.
Hơn nữa, chúng ta cũng có thể kết hợp nhiều value với nhau, chẳng hạn như trong ví dụ dưới đây.

img {
  -webkit-filter: grayscale(100%) contrast(150%); 
}

5. Hiệu ứng làm mờ

img:hover {
  -webkit-filter: blur(5px); 
}

Các bạn có thể xem qua bản demo ở đây:

6. Kết luận

Thuộc tính này hiện tại được support ở hầu hết các browser, ngoại trừ IE 12 trở xuống 🙃. Các bạn có thể kiểm tra trình duyệt hỗ trợ tại đây. Thực tế còn rất nhiều các effects khác nữa chẳng hạn như hue-rotate, invert và saturate, nhưng tôi nghĩ rằng chúng ít được áp dụng hơn.
Tool online điều chỉnh hiệu ứng: https://www.cssfilters.co/
Xin cảm ơn và hẹn gặp lại các bạn trong các bài viết tiếp theo!

---

Bài viết được tham khảo tại: https://viblo.asia/p/xu-ly-hieu-ung-hinh-anh-tuyet-dep-voi-css-filter-effect-gDVK2zRXKLj