Đã đăng vào thg 12 29, 2017 7:41 SA 0 phút đọc
Thuộc tính Filter được hỗ trợ từ CSS3, được sử dụng để tạo một số visual effects [ví dụ: blur, saturation] lên một thành phần html [thường là ảnh]. Bạn có thể thấy một số thuộc tính quen thuộc này trong một số phần mềm xử lý ảnh như Photoshop, Lightroom...
Filter functions
Một số hàm có trong thuộc tính filter:
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
Dưới đây là một số ví dụ về CSS Filter:
Example
Một số filter cơ bản
- Greyscale
.filter_grayscale {
-webkit-filter: grayscale[1];
filter: grayscale[1];
}
.filter_sepia {
-webkit-filter: sepia[1];
filter: sepia[1];
}
.filter_saturate {
-webkit-filter: saturate[4];
filter: saturate[4];
}
- 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];
}
.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];
}
.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];
}
.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];
}
All rights reserved
Hướng dẫn sử dụng thuộc tính filter
trong css
để tùy biến giao diện
filter
là thuộc tính áp dụng để làm các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho các element. filter
thường được sử dụng để điều chỉnh kết xuất hình ảnh, nền và đường viền
Để tìm hiểu nhiều hơn về filter
các bạn có thể tham khảo thêm ở MDN web docs
Sau đây là một số ví dụ mẫu mà các bạn có thể thử hiệu ứng ngay
filter: drop-shadow[16px 16px 20px blue];
drop-shadow[16px 16px 20px blue]
Áp dụng
filter: hue-rotate[90deg];
filter: contrast[175%] brightness[3%];
contrast[175%] brightness[3%]
Áp dụng
Trong đó bạn có thể kết hợp 2 thuộc tính invert
và hue-rotate
để tạo hiệu ứng website của mình thành chế độ Dark Mode.
filter: invert[1] hue-rotate[180deg];
invert[1] hue-rotate[180deg]
Áp dụng
Bộ lọc invert
giúp đảo ngược bảng màu của ứng dụng. Vì vậy, đen trở thành trắng và trắng trở thành đen và tương tự cho tất cả các màu.
Bộ lọc hue-rotate
giúp chúng ta có tất cả các màu khác không phải là màu đen và trắng. Xoay màu 180 độ, mình đảm bảo chủ đề màu sắc của ứng dụng không thay đổi mà chỉ làm giảm màu sắc của nó.
Bạn có thể áp dụng luôn invert[1] hue-rotate[180deg]
cho thẻ img
để có hiệu ứng đảo ngược.