CSS Filter - Blend màu bằng css

truongtuongtu bắt đầu chủ đề từ 4 năm trướ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:

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

Ví dụ về CSS Filter:

CSS Filter - Blend màu bằng css image 43

Một số filter cơ bản

1.Greyscale

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

CSS Filter - Blend màu bằng css image 44

2. Sepia

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

CSS Filter - Blend màu bằng css image 45

3. Saturate

.filter_saturate {     
    -webkit-filter: saturate(4);     
    filter: saturate(4); 
}

CSS Filter - Blend màu bằng css image 3 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..

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

CSS Filter - Blend màu bằng css image 4

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

CSS Filter - Blend màu bằng css image 3

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

CSS Filter - Blend màu bằng css image 2

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

CSS Filter - Blend màu bằng css image 3

Ta có thể tạo rất nhiều filter từ việc kết hợp các thuộc tính của CSS Filter. Hãy thử và tạo ra những filter cho riêng mình nhé

CSS
CSS3

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·