[ad_1]
Khi tôi thấy thiết kế lại Thủ thuật CSS, tôi đã bị cuốn hút. Tôi yêu các liên kết với độ dốc. Tôi đã nói với bản thân mình rằng tôi sẽ sử dụng các liên kết gradient cho dự án tiếp theo của mình.
Đó là những gì tôi đã làm cho Tìm hiểu cổng thông tin khóa học JavaScript. Các liên kết trông như thế này:
Tôi muốn chia sẻ những gì tôi đã học được về việc tạo liên kết độ dốc
Tạo văn bản Gradient
Chris Coyier đã viết một bài viết về việc tạo văn bản gradient trở lại vào năm 2012. Bài báo này đã cũ, nhưng nó vẫn còn hiệu lực. Ông đã đưa ra đoạn trích sau trong bài viết:
.gradient-text {
nền: -webkit-linear-gradient (#eee, # 333);
-webkit-nền-clip: văn bản;
-webkit-text-fill-color: trong suốt;
}
gradient tuyến tính hiện được hỗ trợ trên tất cả các trình duyệt. Chúng tôi không cần phải thêm tiền tố -webkit nữa. Mã rút ngắn có thể được rút ngắn thành:
.gradient-text {
nền: gradient tuyến tính (#eee, # 333);
-webkit-nền-clip: văn bản;
-webkit-text-fill-color: trong suốt;
}
Tạo độ dốc nghiêng
Chúng tôi có thể cung cấp một góc tới gradient tuyến tính để thay đổi góc của gradient. Sau khi chơi xung quanh một chút, tôi quyết định sử dụng 120deg làm góc.
.gradient-text {
nền: gradient tuyến tính (120deg, # ab4e19, # c99a2e);
-webkit-nền-clip: văn bản;
-webkit-text-fill-color: trong suốt;
}
Văn bản gradient nhiều dòng
Đoạn mã trên hỗ trợ văn bản gradient nhiều dòng trên Chrome, Firefox và Edge. Nhưng nó không hoạt động trên Safari. Văn bản đi vào hàng thứ hai (hoặc sau này) trở nên hoàn toàn trong suốt.
Tôi không hiểu tại sao, vì vậy tôi đã kiểm tra các liên kết trên Thủ thuật CSS. Tôi nhận thấy họ đã sử dụng một tài sản box-trang trí-break . Văn bản gradient đa dòng hoạt động trên Safari sau khi tôi đặt box-trang trí-break thành clone .
.gradient-text {
nền: gradient tuyến tính (120deg, # ab4e19, # c99a2e);
-webkit-nền-clip: văn bản;
-webkit-text-fill-color: trong suốt;
-webkit-box-trang trí-break: clone;
}
Gạch chân
Liên kết nên có gạch chân . Các gạch chân làm rõ ràng rằng các liên kết là các liên kết.
Tôi đã thử đặt đoạn .gradient-text vào các liên kết, nhưng tôi phát hiện ra có bất kỳ gạch chân nào.
Tại sao?
Tôi đã đào xung quanh và nhận ra rằng -webkit-text-fill-color thay đổi text-trang trí-màu . Khi chúng tôi đặt -webkit-text-fill-color thành trong suốt, chúng tôi cũng đặt text-trang trí-màu thành trong suốt .
Vì vậy, cách dễ nhất để mang lại phần gạch chân là thay đổi text-trang trí-màu .
một {
hình nền: tuyến tính-gradient (120deg, # ab4e19, # c99a2e);
văn bản-trang trí-màu sắc: # ab4e19;
/*...*/
}
Gạch chân Gradient
Tôi nghĩ về việc tạo một gạch chân gradient vì văn bản chứa một gradient. Thật không may, nó không thể. 😢.
Bạn chỉ có thể tạo gạch chân gradient với hình nền . (Xem phần gạch chân kiểu chữ nhật trên web cho một danh sách các phương pháp có thể để tạo phần gạch chân). Chúng ta có thể sử dụng hình nền để tạo gạch chân gradient vì chúng ta đã sử dụng nó để tạo văn bản gradient.
Nhưng phần gạch chân trông xấu xí!
Trang trí văn bản gạch chân trông xấu xí ở cỡ chữ lớn. Nhưng khi họ sử dụng ok khi họ ở kích thước phông chữ bình thường.
Tôi đề nghị bạn không nên thêm trang trí văn bản gạch chân cho văn bản lớn. Thay vào đó, hãy xem xét việc tạo gạch chân bằng một phương pháp khác.
Gradient + Tập trung
Liên kết Gradient trông tuyệt vời với đường viền tiêu điểm. Chỉ cần nói.
Cảm ơn đã đọc. Bài viết này đã giúp bạn ra ngoài? Nếu nó đã làm, tôi hy vọng bạn xem xét chia sẻ nó. Bạn có thể giúp đỡ người khác. Cảm ơn rất nhiều!
[ad_2]
Source link: webdesignernews