Podcast CSS – 024: Chế độ kết hợp
Duotone là một tuỳ chọn xử lý màu phổ biến dành cho nhiếp ảnh khiến hình ảnh trông giống như chỉ được tạo thành từ hai màu tương phản: một dùng cho vùng sáng và cái còn lại cho điều kiện ánh sáng yếu. Tuy nhiên, bạn có thể làm việc này như thế nào với CSS?
Sử dụng chế độ pha trộn—và các kỹ thuật khác mà bạn đã tìm hiểu, chẳng hạn như bộ lọc và phần tử giả – bạn có thể áp dụng hiệu ứng này cho mọi hình ảnh.
Chế độ pha trộn là gì?
Chế độ trộn thường được dùng trong các công cụ thiết kế như Photoshop để tạo hiệu ứng bố cục bằng cách pha trộn màu sắc từ hai lớp trở lên. Bằng cách thay đổi cách kết hợp màu sắc, bạn có thể có được những hiệu ứng hình ảnh thực sự thú vị. Bạn cũng có thể dùng chế độ pha trộn để làm tiện ích, chẳng hạn như cách ly hình ảnh có nền trắng, nên ứng dụng sẽ có nền trong suốt.
Bạn có thể sử dụng hầu hết các chế độ pha trộn có sẵn trong công cụ thiết kế bằng CSS,
sử dụng
mix-blend-mode
hoặc
Thuộc tính background-blend-mode
.
mix-blend-mode
áp dụng chế độ kết hợp cho toàn bộ phần tử
và background-blend-mode
áp dụng chế độ kết hợp cho nền của một phần tử.
Bạn sử dụng background-blend-mode
khi có nhiều nền trên một phần tử
và muốn chúng hoà hợp với nhau.
mix-blend-mode
ảnh hưởng đến toàn bộ phần tử,
bao gồm cả các phần tử giả.
Một trường hợp sử dụng là trong ví dụ ban đầu về hình ảnh bộ đôi,
có các lớp màu được áp dụng cho phần tử thông qua phần tử giả.
Chế độ trộn có 2 danh mục: tách rời và không thể tách biệt. Chế độ pha trộn tách biệt sẽ xem xét từng thành phần màu, như RGB. Chế độ pha trộn không thể tách biệt sẽ xem xét tất cả các thành phần màu như nhau.
Khả năng tương thích với trình duyệt
mix-blend-mode
background-blend-mode
Chế độ kết hợp có thể phân tách
Bình thường
Đây là chế độ pha trộn mặc định và không thay đổi gì về cách một phần tử pha trộn với những phần tử khác.
Nhân
Chế độ kết hợp multiply
giống như xếp nhiều tấm trong suốt lên nhau.
Các pixel trắng sẽ xuất hiện trong suốt
và các điểm ảnh đen sẽ có màu đen.
Mọi giá trị ở giữa sẽ nhân các giá trị độ sáng (ánh sáng) của lớp đó.
Tức là đèn sẽ sáng hơn và tối đi nhiều,
tối hơn – thường tạo ra kết quả tối hơn.
.my-element {
mix-blend-mode: multiply;
}
Màn hình
Việc sử dụng screen
sẽ nhân các giá trị light (ánh sáng) – một hiệu ứng nghịch đảo với multiply
,
và thường sẽ cho ra kết quả sáng hơn.
.my-element {
mix-blend-mode: screen;
}
Lớp phủ
Chế độ kết hợp này – overlay
– kết hợp multiply
và screen
.
Màu tối cơ bản trở nên tối hơn và màu sáng cơ bản trở nên sáng hơn.
Các màu tầm trung, chẳng hạn như 50% màu xám, không bị ảnh hưởng.
.my-element {
mix-blend-mode: overlay;
}
Làm tối
Chế độ kết hợp darken
so sánh độ sáng màu tối của hình ảnh nguồn và hình ảnh phông nền
rồi chọn vùng tối nhất trong hai vùng đó.
Thực hiện điều này bằng cách so sánh các giá trị rgb thay vì độ sáng (như multiply
và screen
sẽ thực hiện),
cho từng kênh màu.
Với darken
và lighten
, các giá trị màu mới thường được tạo trong quá trình so sánh này.
.my-element {
mix-blend-mode: darken;
}
Lighten
Việc sử dụng lighten
có ý nghĩa hoàn toàn ngược lại với darken
.
.my-element {
mix-blend-mode: lighten;
}
Tránh màu
Nếu bạn sử dụng color-dodge
, chế độ này sẽ làm sáng màu nền để phản ánh màu nguồn.
Màu đen thuần tuý sẽ không có hiệu ứng từ chế độ này.
.my-element {
mix-blend-mode: color-dodge;
}
Hiệu ứng cháy màu
Chế độ trộn color-burn
rất giống với chế độ trộn multiply
,
nhưng lại tăng độ tương phản, giúp tông màu trung bình bão hoà hơn và giảm các vùng sáng.
.my-element {
mix-blend-mode: color-burn;
}
Ánh sáng cứng
Việc sử dụng hard-light
sẽ tạo ra độ tương phản sống động.
Chế độ kết hợp này sàng lọc hoặc nhân các giá trị độ sáng.
Nếu giá trị pixel sáng hơn 50% màu xám, hình ảnh sẽ được làm sáng,
như thể máy tính được sàng lọc. Nếu chỉ số tối hơn, giá trị này sẽ được nhân lên gấp bội.
.my-element {
mix-blend-mode: hard-light;
}
Ánh sáng dịu
Chế độ pha trộn soft-light
là phiên bản ít gay cấn hơn của overlay
.
Chế độ này hoạt động theo cách tương tự nhưng ít tương phản hơn.
.my-element {
mix-blend-mode: soft-light;
}
Chênh lệch
Một cách hay để hình dung cách hoạt động của difference
giống như cách hoạt động của ảnh phủ định.
Chế độ kết hợp difference
lấy giá trị khác nhau của từng pixel,
đảo ngược màu sáng.
Nếu các giá trị màu giống hệt nhau, chúng sẽ trở thành màu đen.
Những khác biệt về giá trị sẽ đảo ngược.
.my-element {
mix-blend-mode: difference;
}
Loại trừ
Việc sử dụng exclusion
rất giống với difference
,
nhưng thay vì trả lại màu đen cho các pixel giống nhau,
nó sẽ trả về 50% màu xám, dẫn đến đầu ra mềm hơn với ít độ tương phản hơn.
.my-element {
mix-blend-mode: exclusion;
}
Chế độ kết hợp không thể tách biệt
Bạn có thể nghĩ đến các chế độ pha trộn này như các thành phần color HSL. Mỗi phương thức lấy một giá trị thành phần cụ thể từ lớp hoạt động và kết hợp giá trị đó với các giá trị thành phần khác.
Màu sắc
Chế độ pha trộn hue
lấy sắc độ của màu nguồn
và áp dụng thông số này cho độ bão hoà và độ sáng của màu nền.
.my-element {
mix-blend-mode: hue;
}
Độ bão hòa
Tính năng này hoạt động giống như hue
,
nhưng việc sử dụng saturation
làm chế độ pha trộn sẽ áp dụng độ rực màu của màu nguồn
vào sắc độ và độ sáng của màu phông nền.
.my-element {
mix-blend-mode: saturation;
}
Màu
Chế độ pha trộn color
sẽ tạo một màu dựa trên màu sắc và độ rực màu của màu nguồn
và độ sáng của màu phông nền.
.my-element {
mix-blend-mode: color;
}
Độ sáng
Cuối cùng, luminosity
là nghịch đảo của color
.
Tính năng này tạo ra một màu sắc với độ sáng của màu nguồn, sắc độ và độ rực màu của màu phông nền.
.my-element {
mix-blend-mode: luminosity;
}
Thuộc tính isolation
Nếu bạn đặt isolation
có giá trị isolate
,
nó sẽ tạo ra một ngữ cảnh xếp chồng mới,
để hình ảnh không bị pha trộn với lớp phông nền.
Như bạn đã tìm hiểu trong mô-đun chỉ mục z, khi tạo một ngữ cảnh xếp chồng mới,
lớp đó trở thành lớp cơ sở.
Điều này có nghĩa là các chế độ kết hợp cấp độ gốc sẽ không còn áp dụng nữa,
nhưng các phần tử bên trong một phần tử có tập hợp isolation: isolate
có thể vẫn kết hợp.
Lưu ý rằng thao tác này không hoạt động với background-blend-mode
vì thuộc tính nền đã bị tách riêng.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về chế độ kết hợp
Đâu là chế độ kết hợp CSS?
Nếu muốn phối các màu khác nhau theo những cách khác nhau, bạn sẽ cần kiểu chế độ pha trộn nào?