Liên kết độ dốc nhiều dòng | Zell Lừng

[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:

 Liên kết màu xanh lam với gạch chân màu xanh. Khi di chuột, văn bản có độ dốc từ màu cam sang màu vàng; gạch chân trở thành màu cam rắn.

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;
}
 
   Văn bản với độ dốc dọc. Từ màu xám nhạt ở phía trên đến màu xám đậm ở phía dưới.

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 với độ dốc tuyến tính được đặt thành 120 độ.

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.

   Hàng văn bản thứ hai trên Safari là 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;
}
 
   Đã sửa lỗi văn bản Gradient trên safari.

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.

   Đã sửa lỗi văn bản Gradient trên safari.

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 .

 Textsfill-color: màu trong suốt trang trí văn bản thành màu 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;
  /*...*/
}
 
   Đặt màu trang trí văn bản thành màu cam.

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.

 Liên kết màu xanh lam với gạch chân màu xanh. Khi di chuột, văn bản có độ dốc từ màu cam sang màu vàng; gạch chân trở thành màu cam rắn.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

.
.
.
.