Hướng dẫn dùng filter grayscale trong PHP
Cú pháp sử dụng .myfilter {filter: các_hàm_filter} Các hàm Sử dụng các hàm FilterĐây là ảnh gốc không có hiệu ứng filter, sau đó ta sẽ áp dụng một số hàm filter xem ảnh đó biến đổi ra sao:
Đã đăng vào thg 10 22, 2019 3:26 CH 2 phút đọc Đ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 Grayscale hoặc Sephia 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 Các hiệu ứngÁp dụng các hiệu ứng là rất dễ dàng. Hãy xem đoạn code dưới đây, để biến hình ảnh bình thường thành ảnh có hiệu ứng thang màu xám;
...và đoạn css dưới đây sẽ cho hiệu ứng nâu đỏ
Cả hai value Cũng có thể điều chỉnh độ sáng của hình ảnh bằng cách sử dụng
Cả Ngoài các giá trị từ 0-100%, có thể điều chỉnh độ tối sáng của hình ảnh theo cách dưới đây
..tương tự, chúng ta cũng có thể điều chỉnh độ tương phản hình ảnh theo cách này
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. Lần lượt set
Cuối cùng, có một hiệu ứng nữa chúng ta có thể thử là Gaussian Blur, hiệu ứng này sẽ làm mờ hình ảnh đi.
Các bạn có thể xem qua bản demo ở đây: Kết luậnLưu ý: 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ư Tham khảo: https://www.hongkiat.com/blog/css-filter/ All rights reserved |