web-dev-qa-db-ja.com

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

私はテキストグラデーションに多くのことを試みました。サファリとchromeのコードを見つけましたが、他のブラウザでは互換性がありません。背景画像を使用せずに機能させたいのです。適切な解決策がある場合は、親切に提供してください。

csslinear-gradients
23
Hiten S

これを行う最善の方法は、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 を参照してください。

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

JQueryプラグインを使用してこれを行うことができます。

Cufonプラグインにもそれがあるかもしれません、あなたはそれをチェックするべきです。 RaphaelプラグインまたはSVGとVMLでも実行できますが、純粋なCSSクロスブラウザソリューションを見つけるのは困難です。

Chromeおよび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)));

残りのブラウザでは、JavaScriptを使用する必要があります。

6
Jozsef Kerekes