Đã đăng vào thg 12 29, 2017 7:41 SA 0 phút đọc 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
Đã đăng vào thg 10 10, 2018 1:59 SA 0 phút đọc 0 phút đọc
Bạn có thể áp dụng filter cho toàn bộ phần tử HTML khá dễ dàng với thuộc tính filter. Nhưng điều gì sẽ xảy ra nếu bạn muốn áp dụng bộ lọc chỉ cho background image của một phần tử? Có các thuộc tính CSS dành riêng cho background image, như chế độ hòa trộn nền [thuộc tính background-blend-mode] - nhưng việc pha trộn màu [blend] và các bộ lọc màu [filter] là không giống nhau.
Dưới dây mình sẽ hướng dẫn các bạn làm điều đó với việc sử dụng pseudo-element.pseudo-element.
CSS
.element {
position: relative;
}
.element::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url[image-to-be-filtered.jpg];
filter: grayscale[100%];
}
.element-inside {
/* Sử dụng position relative sẽ làm cho nó xếp chồng lên trên thẻ ::before */
position: relative;
}
HTML
element
Demo
Dưới đây là một tool khá hay để các bạn có thể thử nghiệm của tác giả Dan WilsonDan Wilson
All rights reserved