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

  1. Grayscale
.filter_grayscale {     
    -webkit-filter: grayscale(1);    
    filter: grayscale(1); 
}

  1. Sepia
.filter_sepia {     
    -webkit-filter: sepia(1);     
    filter: sepia(1);
}

  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… :))

  1. 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);
}

  1. 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);
}

  1. 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);
}

  1. 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 đủ

Chia sẻ
Bài trướcAngularJS là gì – Front End frameworks số 1 thế giới cho single page
Bài tiếp theoXcode9 và những tính năng, thay đổi mới
Tôi là một lập trình viên thiết kế website và sau này là cả IOS ( Android thì chỉ biết sơ sơ ) Tôi đã bắt đầu thực hiện dự án Freelancer đầu tay của mình vào năm 2009 khi tôi lần đầu đi làm. Và với những đánh giá tích cực của khách hàng ban đầu vì hỗ trợ tốt, hậu mãi tốt và tự chủ động tìm hiểu/update thêm tính năng cho khách hàng nên tôi đã nhận được nhiều hợp đồng hơn sau đó. Kết quả là vào năm 2011 tôi đã thành lập Mona Media với chỉ 2 nhân viên thời gian đầu. Tôi tự hào về kinh nghiệm, kiến thức và sự nhiệt thành của mình trong mỗi dự án của khách hàng. Mona Media lựa chọn phân khúc của sự hiệu quả, không sáo rỗng, không màu mè, chúng tôi chỉ tập trung mang lại những giá trị hoàn hảo cho khách hàng qua website/phần mềm.