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