Điều chỉnh hình ảnh với hiệu ứng bộ lọc CSS
Điều chỉnh hình ảnh độ sáng và Tương phản, hoặc biến hình ảnh thành Thang độ xám hoặc là 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. Nhưng, giờ đây có thể thêm các hiệu ứng tương tự vào hình ảnh web bằng CSS.
Khả năng này đến từ Hiệu ứng bộ lọc thực sự vẫn đang trong giai đoạn Dự thảo làm việc. Tuy nhiên, trình duyệt Webkit dường như là một bước đi đầu trong việc thực hiện tính năng này.
Vì vậy, hãy thử xem và chúng tôi sẽ sử dụng hình ảnh này từ Mehdi Kh để thể hiện các hiệu ứng.
Cac hiệu ưng
Áp dụng các hiệu ứng là rất dễ dàng. Hãy xem đoạn trích dưới đây, để biến hình ảnh thành thang độ xám;
img -webkit-filter: thang độ xám (100%);
Giáo dục và đây là cho nâu đỏ ala Instagram.
img -webkit-bộ lọc: nâu đỏ (100%);
Cả hai nâu đỏ và thang độ xám các giá trị được nêu theo tỷ lệ phần trăm trong đó 100% là mức tối đa và áp dụng 0% sẽ giữ hình ảnh không thay đổi, nhưng khi giá trị không được chỉ định rõ ràng 100% sẽ được lấy làm mặc định.
Làm sáng hình ảnh cũng có thể, và chúng ta có thể làm điều đó bằng cách sử dụng độ sáng chức năng, như sau;
img -webkit-filter: độ sáng (50%);
Hiệu ứng độ sáng hoạt động giống như hiệu ứng tương phản và màu nâu đỏ ở trên nơi giá trị của 0% sẽ giữ hình ảnh như hiện tại và áp dụng 100% sẽ làm sáng hoàn toàn hình ảnh, có thể chỉ hiển thị một trang trắng trống thay vì hình ảnh.
Hiệu ứng độ sáng cũng cho phép các giá trị âm, trong đó nó sẽ làm tối hình ảnh.
img -webkit-filter: độ sáng (-50%);
Càng và chúng ta có thể điều chỉnh độ tương phản hình ảnh theo cách này.
img -webkit-filter: độ tương phản (200%);
Có một chút khác biệt về cách thức hoạt động của giá trị, như bạn có thể thấy ở trên, chúng tôi đặt tương phản() bởi 200%, điều này là do giá trị của 100% là điểm bắt đầu mà hình ảnh sẽ không thay đổi. Khi giá trị dưới đây 100%, giả sử 50%, hình ảnh sẽ trở nên ít tương phản hơn.
Hơn nữa, chúng ta cũng có thể kết hợp hiệu ứng trong một khối khai báo, chẳng hạn như trong ví dụ dưới đây. Chúng tôi biến hình ảnh thành thang độ xám và tăng tương phản 50% cùng một lúc.
img -webkit-filter: độ tương phản thang độ xám (100%) (150%);
Bằng cách kết hợp bộ lọc với chuyển đổi CSS3, chúng ta có thể tạo ra sự duyên dáng bay lượn hiệu ứng.
img: hover -webkit-filter: grayscale (0%); img: hover -webkit-filter: sepia (0%); img: hover -webkit-filter: độ sáng (0%); img: hover -webkit-filter: độ tương phản (100%);
Cuối cùng, có một hiệu ứng nữa chúng ta có thể thử; các Gaussian Blur, sẽ làm mờ phần tử được nhắm mục tiêu.
img: hover -webkit-filter: Blur (5px);
Giống như trong Photoshop, giá trị mờ được ghi trong bán kính pixel và nếu giá trị không được nêu rõ ràng, 0 sẽ được lấy làm mặc định và hình ảnh được để nguyên như vậy.
Suy nghĩ cuối cùng
Thực tế có rất nhiều hiệu ứng trong spec. nhu la xoay màu, đảo ngược và bão hòa, nhưng tôi nghĩ rằng chúng ít được áp dụng trong các trường hợp Web thực. Do đó, cuộc thảo luận chỉ giới hạn ở bốn hiệu ứng.
Và, mặc dù cuộc thảo luận được áp dụng cho hình ảnh trong hướng dẫn này, thuộc tính thực sự cũng có thể được áp dụng cho bất kỳ yếu tố nào trong DOM.
Cuối cùng, bạn có thể xem bản demo trực tiếp từ các liên kết dưới đây. Xin lưu ý rằng Bộ lọc hiện chỉ được hỗ trợ trong Chrome 19 và ở trên.
- Bản giới thiệu
- Tải xuống nguồn
