Hướng dẫn color contrast scss - scss độ tương phản màu sắc

The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.

color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)

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

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

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

Specifications

Browser compatibility

BCD tables only load in the browser

Đã đă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:

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

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

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

.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