Css có thêm thuộc tính mới là Filter được hỗ trợ từ phiên bản CSS3, sử dụng để tạo một số hiệu ứng effects như mờ (blur), bão hòa màu (saturation), chỉnh sáng tối (brightness), tương phản (contrast)… cho ra các kết quả tương tự như việc dùng Photoshop hay Lightroom…
CSS function – Filter
Một số hàm có trong thuộc tính filter:
| Filter | function |
|---|---|
| blur(px) | tạo hiệu ứng mờ lên hình ảnh. Giá trị truyền vào càng lớn thì ảnh càng mờ |
| brightness(%) | điều chỉnh độ sáng của hình ảnh |
| contrast(%) | điều chỉnh độ tương phản của hình ảnh |
| drop-shadow(h-shadow v-shadow blur spread color) | tạo đổ bóng cho hình ảnh |
| grayscale(%) | chuyển ảnh sang chế độ màu đen trắng |
| hue-rotate(deg) | Áp dụng hue rotation trên hình ảnh. Giá trị xác định số lượng xung quanh vòng tròn màu mẫu hình ảnh sẽ được điều chỉnh. 0deg là mặc định, và đại diện cho hình ảnh ban đầu. |
| invert(%) | đảo ngược màu ảnh |
| opacity(%) | thiết lập mức độ trong suốt của ảnh |
| saturate(%) | mức độ bão hòa màu |
| sepia(%) | chuyển ảnh sang chế độ màu nâu-đỏ |
Chi tiết các function bạn có thể tìm hiểu tại đây
Ví dụ:
Một số filter cơ bản
- Grayscale
.filter_grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
- Sepia
.filter_sepia {
-webkit-filter: sepia(1);
filter: sepia(1);
}
- Saturate
.filter_saturate {
-webkit-filter: saturate(4);
filter: saturate(4);
}
Chúng ta có thể kết hợp các functions này để tạo các bộ lọc “chuyên nghiệp” như Instagram, VSCO… :))
- XPRO2
.filter_xpro2 {
-webkit-filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);
filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);
}
- NASHVILLE
.filter_nashville {
-webkit-filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);
filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);
}
- EARLYBIRD
.filter_earlybird {
-webkit-filter: sepia(0.4) saturate(1.6) contrast(1.1) brightness(0.9) hue-rotate(-10deg);
filter: sepia(0.4) saturate(1.6) contrast(1.1) brightness(0.9) hue-rotate(-10deg);
}
- 1977
.filter_1977 {
-webkit-filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8);
filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8);
}
Về các hàm trong filter thì cũng còn nhiều nữa, tuy nhiên cá nhân tôi thấy là kết quả cuối cùng của các hàm đó không đẹp lắm nên không giới thiệu ở đây. Bạn có thể xem thêm tại https://css-tricks.com/almanac/properties/f/filter/
Sử dụng CSS filter để tạo ra các hình ảnh như gallery, hoặc sử dụng linh động để tạo ra các hiệu ứng hover đẹp. Ví dụ: để mặc định Grayscale (đen trắng) mà khi hover chuột vào thì hiện màu đầy đủ
