Cách sử dụng Chế độ hòa trộn CSS3

Ghi chú: Tính năng này ở đây yêu cầu bật từ chrome://flags trang này Mẹo CSS làm việc.

Nếu bạn đã từng sử dụng trình chỉnh sửa ảnh hoặc đồ họa như Photoshop và Pixelmator, bạn hẳn đã quen với các chế độ hòa trộn. Chế độ hòa trộn là một tập hợp các chế độ cho phép một đối tượng pha trộn với các đối tượng khác, và như vậy tạo ra sản lượng tương phản của hỗn hợp. Nếu được thực hiện đúng cách, Blending Modes có thể tạo ra một kết quả rất hấp dẫn, như thế này.

Blending Mode là một tính năng chỉ có trong các trình chỉnh sửa ảnh và đồ họa. Ngày nay, bạn có thể tìm thấy nó trong lĩnh vực CSS. Hãy xem nó hoạt động như thế nào.

Hiểu các chức năng màu sắc ÍT

Hiểu các chức năng màu sắc ÍT

Chúng tôi đã đề cập khá nhiều về LESS, từ việc tạo điều hướng đẹp mắt đến các mẹo về cách … Đọc thêm

Bắt đầu

Cần lưu ý rằng CSS3 Blend Mode là một tính năng thử nghiệm. Firefox và Chrome là trình duyệt duy nhất có tính năng này tại thời điểm viết bài.

Ghi chú: Trong Chrome, trước khi nó có thể hiển thị Chế độ hòa trộn CSS3, bạn sẽ phải bật Các tính năng nền tảng web từ chrome://flags trang.

chế độ hòa trộn css3

Chế độ hòa trộn nền và trộn

Có hai thuộc tính CSS mới được giới thiệu liên quan đến Chế độ hòa trộn: mix-blend-modebackground-blend-mode.

Các mix-blend-mode xác định cách nội dung của một phần tử kết hợp với nội dung khác bên dưới. Trong khi background-blend-mode tài sản, như tên của nó, giải quyết màu nền, hình nền và độ dốc nền.

Giống như trong Photoshop, chúng tôi có thể áp dụng các chế độ Trộn sau cho các thuộc tính CSS đó: bình thường, nhân, màn hình, lớp phủ, làm tối, làm sáng, tránh màu, ghi màu, ánh sáng cứng, ánh sáng dịu, sự khác biệt, loại trừ , màu sắc, độ bão hòa, màu sắc và độ sáng.

chế độ hòa trộn trong photoshop

Tùy chọn Blend Mode trong bảng Layer của Photoshop.

Sử dụng Chế độ hòa trộn CSS3

Biểu trưng của Google có nhiều màu sắc và được tạo hình dưới nhiều hình thức cho dự án Google Doodle. Trong bài đăng này, chúng tôi sẽ thực hiện hiệu ứng Blend trên biểu trưng của Google để minh họa cách hoạt động của tính năng CSS3 mới này.

Đầu tiên, hãy thiết lập đánh dấu: chúng ta bọc mỗi chữ cái bằng một phần tử span để chúng ta có thể chỉ định các màu khác nhau cũng như các quy tắc kiểu cho chữ cái.


<h1>
<span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</h1>

Sau đó, chúng tôi thêm màu cho thương hiệu Google, lấy từ BrandColors. Ở đây, chúng tôi chọn phần tử bằng cách sử dụng nth-child bộ chọn, cho phép chúng tôi áp dụng các kiểu mà không cần phải thêm các lớp HTML bổ sung vào mỗi phần tử span bao quanh các chữ cái.


.demo-wrapper .title {
	letter-spacing: -25px;
}
span:first-child {
	color: #4285f4;
	position: relative;
	z-index: 100;
}
span:nth-child(2) {
	color: #db4437;
}
span:nth-child(3) {
	color: #f4b400;
}
span:nth-child(4) {
	color: #4285f4;
	position: relative;
	z-index: 100;
}
span:nth-child(5) {
	color: #0f9d58;	
}
span:nth-child(6) {
	color: #db4437;
}

Ở giai đoạn này, đây là cách biểu trưng xuất hiện. Biểu trưng bây giờ trông dày đặc hơn khi chúng tôi giảm khoảng trắng giữa các chữ cái tại -25px thông qua mã được thêm vào.

logo google

Bây giờ chúng ta áp dụng chế độ Blend.


span {
mix-blend-mode: multiply;
}

Màu sắc ban đầu của biểu trưng cũng như màu sắc của các chữ cái giao nhau trở nên nhiều hơn sống động.

sự pha trộn logo google

Chúng tôi đã áp dụng logo với cả Opacity và CSS3 Blend Mode. Đầu ra, như mong đợi, là đặc biệt; màu sắc của biểu trưng Google với độ mờ được áp dụng trông cũ và mờ. Xem bản demo về sự so sánh của họ trong hoạt động bên dưới.

Các tài nguyên khác

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *