CSS3 Filter – Blend màu như Instagra, photoshop

0
2542

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