CSS - Chế độ Trộn Màu: Mở Khóa Sức Mạnh Của Trộn Màu

Xin chào, những nhà thiết kế web đầy tham vọng và những người yêu thích CSS! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của CSS mix-blend-mode. Như một người giáo viên máy tính gần gũi, tôi rất vui mừng được hướng dẫn các bạn trong hành trình đầy màu sắc này. Vậy, hãy cầm lấy cọ vẽ ảo của mình, và chúng ta cùng bắt đầu trộn màu!

mix-blend-mode là gì?

Trước khi chúng ta nhảy vào chi tiết kỹ thuật, hãy hiểu mix-blend-mode là về điều gì. Hãy tưởng tượng bạn là một nghệ sĩ số với một cọ vẽ kỳ diệu có thể trộn màu theo những cách bạn chưa từng thấy trước đây. Đó chính là những gì mix-blend-mode làm cho chúng ta trong CSS!

mix-blend-mode là một thuộc tính CSS xác định cách nội dung của một phần tử nên trộn với nội dung của phần tử cha và nền của phần tử đó. Nó giống như đeo một bộ kính đặc biệt giúp bạn nhìn thấy thế giới theo một ánh sáng mới - hoặc trong trường hợp này, theo những sự kết hợp màu mới hoàn toàn!

Các giá trị có thể

Bây giờ, hãy cùng xem xét các chế độ trộn màu khác nhau có sẵn cho chúng ta. Hãy tưởng tượng chúng như những cọ vẽ khác nhau trong bộ công cụ nghệ thuật số của bạn:

Chế độ Trộn Màu	Mô tả
normal	Chế độ mặc định. Không có trộn màu.
multiply	Nhân các màu, tạo ra hình ảnh tối hơn.
screen	Nhân đảo ngược các màu, tạo ra hình ảnh sáng hơn.
overlay	Kết hợp multiply và screen.
darken	Chọn màu tối hơn của màu trộn và màu cơ bản.
lighten	Chọn màu sáng hơn của màu trộn và màu cơ bản.
color-dodge	Tăng sáng màu cơ bản để phản chiếu màu trộn.
color-burn	Tối màu cơ bản để phản chiếu màu trộn.
hard-light	Nhân hoặc chặn các màu, tùy thuộc vào màu trộn.
soft-light	Tối hoặc sáng các màu, tùy thuộc vào màu trộn.
difference	Trừ màu tối hơn từ màu sáng hơn.
exclusion	Giống như difference, nhưng với độ tương phản thấp hơn.
hue	Sử dụng màu của màu trộn với độ bão hòa và độ sáng của màu cơ bản.
saturation	Sử dụng độ bão hòa của màu trộn với màu và độ sáng của màu cơ bản.
color	Sử dụng màu và độ bão hòa của màu trộn với độ sáng của màu cơ bản.
luminosity	Sử dụng độ sáng của màu trộn với màu và độ bão hòa của màu cơ bản.

Áp dụng cho

Thuộc tính mix-blend-mode có thể được áp dụng cho bất kỳ phần tử nào. Tuy nhiên, nó thường được sử dụng với hình ảnh, văn bản và các phần tử SVG. Nó giống như có một cây dao Thụy Sĩ của thiết kế - linh hoạt và sẵn sàng cho bất kỳ thử thách sáng tạo nào!

Cú pháp

Cú pháp cho mix-blend-mode rất đơn giản:

 phần_tử {
    mix-blend-mode: <chế độ_trộn_màu>;
}

Trong đó <chế độ_trộn_màu> là một trong các giá trị từ bảng của chúng ta ở trên. Dễ ợt, lemon squeezy!

CSS mix-blend-mode - Các giá trị mix-blend-mode Khác nhau

Hãy cùng làm脏 tay với một số ví dụ mã. Chúng ta sẽ bắt đầu với một kịch bản đơn giản: trộn hai phần tử div chồng lên nhau.

<div class="container">
    <div class="box red"></div>
    <div class="box blue"></div>
</div>

.container {
    position: relative;
    width: 200px;
    height: 200px;
}

.box {
    position: absolute;
    width: 100px;
    height: 100px;
}

.red {
    background-color: red;
    top: 0;
    left: 0;
}

.blue {
    background-color: blue;
    top: 50px;
    left: 50px;
    mix-blend-mode: screen;
}

Trong ví dụ này, chúng ta có hai hộp: một đỏ và một xanh. Hộp xanh được đặt trên hộp đỏ và có chế độ trộn màu là 'screen'. Điều này tạo ra một màu sáng hơn ở khu vực chồng chéo.

Thử thay đổi chế độ trộn màu thành các giá trị khác từ bảng của chúng ta và xem kết quả thay đổi như thế nào. Đó giống như tiến hành một thí nghiệm màu sắc!

CSS mix-blend-mode - Với HTML

Bây giờ, hãy xem mix-blend-mode hoạt động như thế nào với các phần tử HTML. Chúng ta sẽ tạo một ví dụ đơn giản với văn bản trên hình ảnh.

<div class="image-container">
    <img src="landscape.jpg" alt="Beautiful landscape">
    <h1>Hello, World!</h1>
</div>

.image-container {
    position: relative;
}

.image-container img {
    width: 100%;
    height: auto;
}

.image-container h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: white;
    mix-blend-mode: difference;
}

Trong ví dụ này, chúng ta có văn bản trắng trên một hình ảnh. Bằng cách đặt chế độ trộn màu thành 'difference', màu văn bản sẽ thay đổi dựa trên màu nền, tạo ra một hiệu ứng ấn tượng.

CSS mix-blend-mode - Với SVG

Các phần tử SVG cũng có thể受益 từ mix-blend-mode. Hãy tạo một ví dụ đơn giản với các hình tròn chồng lên nhau.

<svg width="200" height="200">
    <circle cx="70" cy="70" r="60" fill="red" />
    <circle cx="130" cy="130" r="60" fill="blue" mix-blend-mode="multiply" />
</svg>

Trong SVG này, chúng ta có hai hình tròn: một đỏ và một xanh. Hình tròn xanh có chế độ trộn màu là 'multiply', làm tối khu vực chồng chéo.

CSS mix-blend-mode - Với Văn bản

Cuối cùng, hãy cùng chơi với văn bản! Chúng ta sẽ tạo một hiệu ứng văn bản màu sắc sử dụng mix-blend-mode.

<div class="text-container">
    <h1>CSS is Awesome!</h1>
</div>

.text-container {
    background: linear-gradient(to right, red, blue);
    padding: 20px;
}

.text-container h1 {
    font-size: 48px;
    color: white;
    mix-blend-mode: difference;
}

Điều này tạo ra một hiệu ứng văn bản sống động nơi màu văn bản thay đổi dựa trên gradient nền.

Và thế là xong, các bạn! Chúng ta đã khám phá thế giới kỳ diệu của CSS mix-blend-mode. Nhớ rằng, chìa khóa để thành thạo thuộc tính này là thử nghiệm. Đừng ngại thử nghiệm với các chế độ trộn màu khác nhau và xem bạn có thể tạo ra những hiệu ứng kỳ diệu nào.

Khi chúng ta kết thúc hành trình đầy màu sắc này, tôi nhớ lại một câu nói của họa sĩ nổi tiếng Bob Ross: "Không có sai lầm, chỉ có những tai nạn vui vẻ." Vậy hãy tiến lên, trộn màu mà không sợ hãi, và tạo ra những tai nạn vui vẻ của riêng bạn với CSS mix-blend-mode!

Credits: Image by storyset