Các hàm filter (bộ lọc) dùng để đặt hiệu ứng hình ảnh trên phần tử như độ tương phản, độ sáng, xoay màu, độ trong suốt, trên hình ảnh, v.v. Xem một số hàm filter:
Độ tương phản (Contrast)
Để đặt độ tương phản ảnh trong CSS, dùng filter: contrast(%). Giá trị 0 làm ảnh đen, 100% là ảnh gốc và mặc định. Giá trị trên 100% làm ảnh tương phản hơn.
Ví dụ
Ví dụ điều chỉnh độ tương phản ảnh với CSS3:
<!DOCTYPE html> <html> <head> <style> img.demo { filter: brightness(120%); filter: contrast(120%); } </style> </head> <body> <h1>Learn MySQL</h1> <img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> <h1>Learn MySQL</h1> <p>Below image is brighter and has more contrast than the original image above.</p> <img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> </body> </html>
Kết quả
Bóng đổ (Drop Shadow)
Để thêm bóng đổ cho ảnh trong CSS3, dùng giá trị drop-shadow cho filter. Các giá trị:
- h-shadow – Chỉ định giá trị pixel cho bóng ngang.
- v-shadow – Chỉ định giá trị pixel cho bóng dọc. Giá trị âm đặt bóng trên ảnh.
- blur – Thêm hiệu ứng mờ cho bóng.
- spread – Giá trị dương làm bóng mở rộng, âm làm co lại.
- color – Thêm màu cho bóng.
Ví dụ
<!DOCTYPE html> <html> <head> <style> img.demo { filter: brightness(120%); filter: contrast(120%); filter: drop-shadow(10px 10px 10px green); } </style> </head> <body> <h1>Learn MySQL</h1> <img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> <h1>Learn MySQL</h1> <img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> </body> </html>
Kết quả
Hiệu ứng Sepia
Để áp dụng hiệu ứng sepia cho ảnh dùng CSS3, dùng giá trị sepia cho filter:
Ví dụ
<!DOCTYPE html> <html> <head> <style> img.demo { filter: sepia(100%); } </style> </head> <body> <h1>Learn Spring Framework</h1> <img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150"> <h1>Learn Spring Framework</h1> <img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150"> </body> </html>
Kết quả
