Bộ lọc hình ảnh CSS

Sử dụng hình ảnh, chúng ta có thể tạo bầu không khí, khơi dậy niềm vui, nụ cười, nỗi buồn hay bất kỳ cảm xúc nào khác. Với hình ảnh, chúng ta có thể thể hiện rất nhiều điều và cũng nói lên rất nhiều điều;

Các nhà thiết kế quan tâm đến việc người dùng sẽ cảm nhận trang web như thế nào và nó sẽ mang lại cảm xúc gì. Các nhà thiết kế đồ họa có thể sử dụng phần mềm nâng cao để chỉnh sửa ảnh và thêm vào đó các bộ lọc, mặt nạ hoặc các hiệu ứng khác quyết định giao diện cuối cùng

Đôi khi, điều đó xảy ra rằng những gì được tạo bởi nhà thiết kế, rất khó viết mã và với tư cách là nhà phát triển, chúng tôi chú ý đến hiệu suất của mã và muốn trang web của mình tải nhanh. Điều đó thường có nghĩa là chúng tôi phải giảm kích thước hình ảnh. Đó cũng là lý do tại sao chúng tôi thích thực hiện các hiệu ứng do nhà thiết kế tạo ra bằng cách sử dụng mã. Đặc biệt là khi chúng ta phải thêm hiệu ứng khi di chuột hoặc nhấp chuột, sau đó chúng ta không muốn tải hai hình ảnh

Chúng ta có thể sử dụng mã để thêm bộ lọc vào ảnh một cách dễ dàng, ví dụ như sử dụng CSS, và trong bài viết này, tôi muốn chỉ cho bạn cách bạn có thể sử dụng bộ lọc để tạo hiệu ứng tuyệt vời

Hãy bắt đầu

Bộ lọc trong CSS

Để tạo bộ lọc cho hình ảnh trong CSS, chúng tôi sử dụng thuộc tính bộ lọc, xác định hiệu ứng hình ảnh bằng một số chức năng khác nhau. Mỗi chức năng có thể cho một kết quả khác với hình ảnh cơ bản. Ngoài ra, có thể thêm nhiều bộ lọc vào một hình ảnh

Hãy đi từng cái một và xem kết quả chúng ta có thể nhận được

1. thang độ xám [%. con số]

Bộ lọc phổ biến nhất được thêm vào hình ảnh là thang độ xám. Nó cho phép tạo ra một bức ảnh đen trắng. Hàm thang độ xám có thể nhận đối số phần trăm hoặc số. 0% có nghĩa là không có gì thay đổi và 100% có nghĩa là hình ảnh sẽ được chuyển hoàn toàn sang thang độ xám. Nếu bạn để trống giá trị, nó sẽ lấy 100% theo mặc định. Nếu bạn muốn đặt giá trị theo số, nó sẽ chấp nhận các giá trị từ 0 đến 1

Trong ví dụ trên, bạn có thể thấy ảnh gốc không có bất kỳ bộ lọc nào, ảnh thứ hai là ảnh có 0. 5 và giá trị cuối cùng là ảnh có thang độ xám hoàn toàn

2. nâu đỏ[%. con số]

Bộ lọc nâu đỏ tạo ảnh màu nâu đỏ. Phương thức sepia[] hoạt động tương tự như thang độ xám; . Giá trị âm không được phép. Hãy xem các ví dụ

Trong ví dụ này, bạn có thể thấy cách bộ lọc sepia hoạt động. Tôi nghĩ rằng đó là một ý tưởng tuyệt vời để sử dụng nó nếu bạn muốn tạo cảm giác rằng bức ảnh hơi cũ. Đó là điều tôi nghĩ đến đầu tiên sau khi nhìn vào bức ảnh màu nâu đỏ

3. mờ [px]

Hiệu ứng làm mờ làm cho ảnh rất mờ bằng cách áp dụng hiệu ứng làm mờ Gaussian. Nó được áp dụng cho kiểm duyệt hoặc ảnh nền mà không cần phải làm cho ảnh thật sắc nét. phương thức blur[] cũng nhận một đối số và đối số phải là một lượng pixel nhất định. Giá trị lớn nhất mà độ mờ lớn hơn sẽ là. Theo mặc định, giá trị là 0

Ví dụ đầu tiên là một hình ảnh cơ bản không có bộ lọc, hình ảnh thứ hai có độ mờ 2px và hơi mờ, và ở hình ảnh cuối cùng, gần như không thể nhận ra những gì trên ảnh

4. độ sáng[%. con số]

Một bộ lọc khác là độ sáng[], cho phép điều chỉnh mức độ sáng tối của hình ảnh. Nó nhận một tham số theo tỷ lệ phần trăm từ 0% đến 100% và mọi thứ ở trên làm cho hình ảnh sáng hơn hoặc dưới dạng một số từ 0 đến 1 hoặc cao hơn để làm cho hình ảnh sáng hơn. Theo mặc định, mọi độ sáng của hình ảnh là 100%. Hãy kiểm tra xem bộ lọc này hoạt động như thế nào trong ví dụ mã

Hình ảnh trong ví dụ được đặt thành 0. 5 và đến 150%. Bạn có thể nhận thấy số càng thấp thì ảnh càng tối và ngược lại

5. tương phản[%. con số]

Bộ lọc tương phản [] cho phép điều chỉnh độ tương phản của hình ảnh. Nếu giá trị được đặt thành 0% hoặc số 0, nó sẽ hoàn toàn tối, được đặt thành 100% hoặc 1, là giá trị mặc định, có nghĩa là ảnh sẽ không bị thay đổi và các giá trị trên 100% hoặc 1 sẽ cung cấp . Hãy xem ví dụ

Trong ví dụ trên, tôi đã giảm độ tương phản của ảnh đầu tiên xuống 10% và tăng độ tương phản của ảnh thứ hai lên 200%

6. bão hòa [%. con số]

Độ bão hòa mô tả cường độ của màu sắc và giá trị của bộ lọc bão hòa càng lớn thì màu sắc càng sống động. Giá trị mặc định của hình ảnh là 100% hoặc 1, 0 có nghĩa là hình ảnh không bão hòa và mọi thứ trên 100% và 1 làm tăng độ bão hòa. Hãy xem ví dụ

Như bạn có thể thấy trong ví dụ, hình ảnh thứ hai không bão hòa và được đặt thành 20% độ bão hòa, và hình ảnh thứ ba được đặt thành 200% độ bão hòa và nó rõ ràng là sống động hơn

7. hue-rotate[deg]

Đầu tiên, trước tiên hãy giải thích hue-rotate là gì vì nó có thể gây nhầm lẫn. nó dành cho tôi. Vì vậy, xoay màu sắc là một chức năng mà chúng ta chỉ định góc xung quanh vòng tròn màu. Đầu vào có thể theo độ hoặc lần lượt. Nó cũng chấp nhận các giá trị âm. Tối đa là 360 độ, vì vậy ngay cả khi chúng ta đặt giá trị lớn hơn thì nó cũng hoạt động như trong vòng tròn, vì vậy, ví dụ: nếu bạn đặt 450 độ thì kết quả sẽ là 90 độ và nếu chúng ta đặt -10 độ, kết quả sẽ như thế nào . Hãy xem ví dụ mã

Trong ví dụ trên, bạn có thể thấy bốn hình ảnh, hình ảnh đầu tiên là nguyên bản, không có bất kỳ phép xoay màu nào, nhưng đó cũng là cách xoay màu 360 độ trông như thế nào. Hình ảnh thứ hai được đặt thành xoay màu sắc 90 độ và có thể thấy rằng màu xanh lá cây ở đây rất mạnh. Hình ảnh thứ ba được đặt thành 180deg và trong ví dụ này, hình ảnh có màu xanh lam hơn và hình ảnh cuối cùng được đặt thành -90deg [giá trị được tính là 240deg] có màu đỏ hơn

8. đảo ngược [%. con số]

Một bộ lọc khác có thể được áp dụng cho hình ảnh của chúng tôi bằng CSS được đảo ngược. Nó được sử dụng để đảo ngược các mẫu trên hình ảnh. Giá trị mà hàm đảo ngược chấp nhận chỉ là giá trị dương. Hãy xem ví dụ

Trong codepen ở trên, bạn có thể thấy ba hình ảnh. Cái đầu tiên là cái gốc, cái tiếp theo được đảo ngược tới 75% và cái cuối cùng được đảo ngược hoàn toàn [giá trị là 1]

Sự kết luận

Việc thêm bộ lọc vào hình ảnh đôi khi có thể rất tiện dụng, đặc biệt nếu bạn muốn đạt được hiệu ứng hình ảnh tuyệt vời

Trong bài viết trên, tôi đã trình bày 8 phương pháp lọc và mô tả các giá trị mà chúng chấp nhận để cung cấp cho bạn một bản tóm tắt các bộ lọc mà bạn chỉ cần nhìn lướt qua là biết nên áp dụng bộ lọc nào để có được kết quả cần thiết

Tôi hy vọng bạn thấy nó hữu ích, đồng thời chia sẻ các phương pháp lọc yêu thích của bạn trong các nhận xét hoặc có thể bạn tạo bất kỳ bộ lọc tùy chỉnh tuyệt đẹp nào?

Có một mã hóa tốt đẹp

Bài đọc liên quan 📖

Hướng dẫn lưới CSS

Flexbox cheatsheet – 12 mẹo và thủ thuật mà mọi nhà phát triển web nên biết