Độ dốc văn bản trình duyệt chéo trong css thuần túy mà không sử dụng hình nền

Question

Tôi đã thử rất nhiều cho độ dốc văn bản. Tôi đã tìm thấy mã cho safari và chrome nhưng nó không tương thích trong các trình duyệt khác. Tôi muốn làm cho nó hoạt động mà không cần sử dụng hình nền. Nếu u có bất kỳ giải pháp thích hợp, vui lòng cung cấp.

Answer 1

Bạn có thể thực hiện việc này bằng các plugin jQuery.

Plugin Cufon cũng có thể có, bạn nên kiểm tra. Nó cũng có thể được thực hiện với plugin Raphael hoặc SVG và VML nhưng khó tìm thấy giải pháp trình duyệt chéo CSS tinh khiết.

Chỉ dành cho Chrome và Safari:

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1))); 

Đối với phần còn lại của các trình duyệt, bạn phải sử dụng một số JavaScript.

Answer 2

\t <style type="text/css"> 
 
\t \t h1 { 
 
\t \t \t font-family: "Myriad Pro", sans-serif; 
 
\t \t \t font-size: 40px; 
 
\t \t \t font-weight: normal; 
 
\t \t } 
 
\t \t 
 
\t \t /* --- start of magic ;-) --- */ 
 
\t \t .white-gradient { 
 
\t \t \t position: relative; 
 
\t \t } 
 
\t \t .white-gradient:after { 
 
\t \t \t content: ''; 
 
\t \t \t display: block; 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t left: 0; 
 
\t \t \t height: 100%; 
 
\t \t \t width: 100%; 
 
\t \t \t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0); 
 
\t \t \t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); 
 
\t \t \t background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
 
\t \t \t background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
 
\t \t \t background:  -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
 
\t \t \t background:  -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
 
\t \t \t background:   linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
 
\t \t } 
 
\t \t /* --- end of magic ;-) --- */ 
 
\t </style> 
 
\t 
 
\t <h1 class="white-gradient">Pure CSS text gradient without any graphics</h1>

Answer 3

tôi thấy cách tốt nhất để làm điều này là sử dụng gradient SVG, thật dễ dàng để làm và không đòi hỏi bất kỳ hình ảnh, dưới đây là một số mã tạo một gradient văn bản đơn giản sử dụng SVG.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
     <defs> 
 
     <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> 
 
      <stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" /> 
 
      <stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" /> 
 
     </linearGradient> 
 
     </defs> 
 
     <text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100"> 
 
    SVG Text Gradient</text> 
 
    </svg>

Bạn có thể thay đổi các giá trị x và y để tạo ra một gradient ngang/dọc hoặc chéo, bạn cũng có thể áp dụng kiểu để nó sử dụng một stylesheet CSS, tất cả phải mất là một dòng thêm mã giữa các thẻ defs.

<link href="style.css" type="text/css" rel="stylesheet" 
      xmlns="http://www.w3.org/1999/xhtml"/> 

Phương pháp này hoạt động trong các phiên bản mới nhất của Chrome, IE, Firefox và Safari. Bạn cũng có thể áp dụng gradient tròn, làm mờ và lọc, để biết thêm thông tin, hãy truy cập W3 Schools.