背景の画像を使用せずに、純粋なCSSのクロスブラウザのテキストグラデーション

Question

私はテキストグラデーションのために多くを試しています。 SafariとChromeのコードが見つかりましたが、他のブラウザでは互換性がありません。私は背景画像を使わずに動作させたい。あなたに適切な解決策があれば、親切に提供してください。

Answer 1

jQueryプラグインでこれを行うことができます。

Cufonプラグインにもその可能性がありますので、確認してください。 RaphaelプラグインやSVG、VMLでも可能ですが、純粋なCSSのクロスブラウザソリューションは見つけにくいです。唯一のChromeとSafariのための

：あなたには、いくつかのJavaScriptを使用する必要がブラウザの残りの部分については

-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))); 

。

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

私はこれを行うための最善の方法は、SVGのグラデーションを使用することです見つけ、それを行うのは簡単だし、任意の画像を必要としない、以下使用して、簡単なテキスト勾配を作成するいくつかのコードがあります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>

あなたは水平/垂直または斜めのグラデーションを作成するには、xとyの値を変更することができ、あなたはまた、CSSスタイルシートを使用してそれにスタイルを適用することができ、それが取るすべては余分なラインですdefsタグの間にコードを挿入します。

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

この方法は、Chrome、IE、Firefox、Safariの最新バージョンで動作します。放射グラデーション、ぼかし、フィルタを適用することもできます。詳しくはW3 Schoolsを参照してください。