CSS でテキストカラーグラデーションを実装する 3 つの方法

Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーションテキストを使用したデザインを設計することがよくあります。以前は、テキストを置き換えるには png 画像しか使用できませんでした。今日では、純粋な CSS を使用してグラデーションテキストを実現できます。参考までに3つの実装方法をご紹介します！

基本スタイル:

.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight: bolder; position: relative; }

最初の方法では、background-cli と text-fill-color を使用します。

.gradient-text-one{  
    背景画像:-webkit-linear-gradient(下部、赤、#fd8403、黄色); 
    -webkit-background-clip:テキスト; 
    -webkit-テキストの塗りつぶし色:透明; 
}

例:

background: -webkit-linear-gradient(…) は、テキスト要素にグラデーションの背景を提供します。

webkit-text-fill-color: transparent テキストを透明色で塗りつぶします。

webkit-background-clip: text 背景をテキストでクリップし、テキストをグラデーション背景色で塗りつぶします。

2 番目の方法では、mask-image を使用します。

.gradient-text-two{
   色：赤;
}
.gradient-text-two[データコンテンツ]::after{
    コンテンツ:attr(データコンテンツ);
    表示: ブロック;
    位置:絶対;
    色：黄色;
    左:0;
    トップ:0;
    zインデックス:2;
    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}

例:

background-image と同様に、mask-image には画像パスまたはグラデーションカラーを指定できます。

3 番目の方法では、linearGradient と fill を使用します。

.gradient-text-three{
    記入してください:url(#SVGID_1_);
    フォントサイズ:40px;
    フォントの太さ: 太字;
}

<svg viewBoxs="0 0 500 300" クラス="svgBox">
    <定義>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
            <stop offset="0" style="stop-color:yellow"/>
            <stop offset="0.5" style="stop-color:#fd8403"/>
            <stop offset="1" style="stop-color:red"/>
        </線形グラデーション>
    </defs>
    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花の年</text>
</svg>

例:

SVG には、主に 2 種類のグラデーションがあります。

線形グラデーション

放射状グラデーション

SVG のグラデーションは、グラフィック要素の塗りつぶしだけでなく、テキスト要素の塗りつぶしにも使用できます。

DOMの例:

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅、user-scalable=いいえ、initial-scale=1.0、maximum-scale=1.0、minimum-scale=1.0">
    <title>CSS3 グラデーション フォント</title>
    <link rel="スタイルシート" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <スタイル タイプ="text/css">
        *{マージン:0;パディング:0;}
        本文、html{幅:100%;高さ:100%;}
        .wrapper{幅:80%;マージン:0 自動;上マージン:30px;}
        .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight: bolder; position: relative; }
        .gradient-text-one{  
            背景画像:-webkit-linear-gradient(下部、赤、#fd8403、黄色); 
            -webkit-background-clip:テキスト; 
            -webkit-テキストの塗りつぶし色:透明; 
        }
        .gradient-text-two{
            色：赤;
        }
        .gradient-text-two[データコンテンツ]::after{
            コンテンツ:attr(データコンテンツ);
            表示: ブロック;
            位置:絶対;
            色：黄色;
            左:0;
            トップ:0;
            zインデックス:2;
            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
        }
        .gradient-text-three{
            記入してください:url(#SVGID_1_);
            フォントサイズ:40px;
            フォントの太さ: 太字;
        }
    </スタイル>
</head>
<本文>
    <セクションクラス="ラッパー">
        <div class="パネル パネル情報">
            <div class="パネル見出し">
                <h3 class="panel-title">方法 1. background-clip + text-fill-color</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-one">花様年華</h3>
            </div>
        </div>
        <div class="パネル パネル警告">
            <div class="パネル見出し">
                <h3 class="panel-title">方法 2. マスク画像</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-two" data-content="少女たちの年">少女たちの年</h3>
            </div>
        </div>
        <div class="panel パネル-危険">
            
            <div class="パネル見出し">
                <h3 class="panel-title">方法 3. svg linearGradient</h3>
            </div>
 
            <div class="panel-body">
                <svg viewBoxs="0 0 500 300" クラス="svgBox">
                    <定義>
                        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
                            <stop offset="0" style="stop-color:yellow"/>
                            <stop offset="0.5" style="stop-color:#fd8403"/>
                            <stop offset="1" style="stop-color:red"/>
                        </線形グラデーション>
                    </defs>
                    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花の年</text>
                </svg>
            </div>
 
        </div>
    </セクション>
</本文>
</html>

効果：