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ừ năm 2009, tôi đã bắt đầu với vị trí Front End Developer, vài tháng sau đó tôi kiêm luôn cả .NET cho các dự án của công ty, mảng phổ thông. Khoản 01 năm sau đó tôi được tham gia phát triển phần mềm quản lý đầu tiên và cũng là lớn nhất cho tới nay. Tôi mở công ty sau 02 năm đi làm với nền tảng hơn 50 khách quen đã tích luỹ được và đội ngũ anh em thiết kế và lập trình đã làm quen trong quá trình đi làm. Chúng tôi tâm niệm làm tốt nhất những dự án hiện có, khách sẽ giới thiệu lại thêm nhiều dự án khác và phương châm kinh doanh này vẫn đang đúng sau gần 10 năm trong nghề của Mona Media