Tìm hiểu cách thêm màu chuyển sắc tuyến tính vào các phần tử văn bản của bạn bằng CSS và cách tránh lỗi chuyển màu thường gặp.
Để thêm màu văn bản gradient vào các phần tử văn bản HTML của bạn, bạn sẽ cần các thuộc tính CSS sau:
-
background -
-webkit-background-clip -
-webkit-text-fill-color
Tại sao chúng tôi sử dụng background thuộc tính để tô màu văn bản? Cách tiếp cận này có vẻ hơi khó hiểu, nhưng tôi hứa rằng nó hoạt động!
Hãy tạo một ví dụ nhanh trong đó chúng tôi áp dụng một gradient tuyến tính từ trái sang phải trên một phần tử văn bản, sử dụng hai màu sau, cam và đỏ:
HTML
Một <h2> phần tử tiêu đề có thuộc tính lớp được gọi là text-gradient :
<h2 class="text-gradient">Gradient text color!</h2>CSS
Thêm các kiểu gradient màu vào .text-gradient lớp:
.text-gradient {
/* Set the background color */
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
/* Mask the color to the text, and remove the rest */
-webkit-background-clip: text;
/* Make the text fill color value transparent so the masked background color comes through */
-webkit-text-fill-color: transparent;
}Kết quả:
Màu văn bản Gradient!
Tốt!
Nhưng chờ một chút!
Bạn có nhận thấy vấn đề với cách hai màu được áp dụng cho phần tử văn bản không? Màu sắc được áp dụng không đồng đều.
linear-gradient Hàm CSS nhận hai giá trị màu:
-
#ff8a00(quả cam) -
#DD4C4F(màu đỏ)
Và nó phải trải đều từ 0 đến 100%, như được chỉ định trong CSS:
(to right, #ff8a00 0%, #DD4C4F 100%)Vì vậy, chúng tôi muốn điều này trên phần tử văn bản:
Nhưng ví dụ văn bản của chúng tôi gần như hoàn toàn là màu cam:
Màu văn bản Gradient!
Mẹo:nếu bạn chuyển chủ đề màu trên trang web này sang chế độ tối (nhấp vào biểu tượng Mặt trăng) thì sẽ dễ nhìn hơn.
Nó xảy ra vì <h2> phần tử tiêu đề là một cấp khối theo mặc định. Điều này có nghĩa là nền của chúng trải dài trên toàn bộ chiều rộng trong vùng chứa mẹ của chúng.
Điều này làm cho các màu từ lớp gradient (.text-gradient ) mà chúng tôi đã thêm vào <h2> phần tử kéo dài ra ngoài chiều rộng văn bản của bạn vì nó đang nhắm mục tiêu đến background tài sản.
Tôi sẽ thêm đường viền vào ví dụ văn bản để làm rõ quan điểm của tôi:
Màu văn bản Gradient!
Bạn có thấy điều đó không?
Gradient văn bản chỉ nên được đặt trên văn bản, không phải nền của nó (nhưng chúng ta cần sử dụng background tài sản để làm cho công việc này).
Để khắc phục điều này, bạn cần ghi đè <h2> display:block mặc định của phần tử cài đặt bằng cách thêm inline-block thay vào đó:
.text-gradient {
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}Kết quả:
Màu văn bản Gradient!
Kẹo! Bạn có thấy sự khác biệt? Bây giờ phần màu đỏ của gradient hai màu đang bật ra nhiều như màu cam vì chúng được áp dụng theo tỷ lệ 50-50.
Khả năng tương thích của trình duyệt
Thủ thuật màu chuyển sắc chỉ được hỗ trợ trong trình duyệt WebKit. Đối với các trình duyệt khác, hãy sử dụng CSS color thông thường thuộc tính như một tùy chọn dự phòng và sử dụng màu tương tự như màu gradient.