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

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>

効果:

要約する

上記は、CSS でテキスト カラー グラデーションを実装する 3 つの方法を紹介しました。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  一般的なメールボックスで正常に表示できる HTML メールを作成するためのヒント

>>:  MySQLフィールドのデフォルト値を設定する方法

推薦する

Linux での vi (vim) の新しい使い方のまとめ

私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...

js 配列エントリ() 反復メソッドを取得する

目次1.entires() メソッドの詳細な構文2.entires() メソッドの一般的な使用法と注...

HTML テーブル マークアップ チュートリアル (38): ヘッダーの境界線の色属性 BORDERCOLOR

テーブルを美しくするために、ヘッダーに異なる境界線の色を設定できます。基本的な構文<TH 境界...

ラベルタグを使用してテキストをクリックしてラジオボタンを選択します

<label> タグは、入力要素のラベル (タグ) を定義します。ラベル要素はユーザーに...

MySQLが日付フィールドインデックスを使用しない理由の要約

目次背景探検する要約する背景テーブルでは、dataTime フィールドは varchar 型に設定さ...

Docker Composeオーケストレーションツールの詳細な説明

Docker の作成Docker Compose は、複数の Docker コンテナを定義して実行す...

jQueryはスライディングタブを実装する

この記事では、スライドタブを実装するためのjQueryの具体的なコードを参考までに紹介します。具体的...

Vue プロジェクトのパッケージ化と最適化の実装手順

目次Vueプロジェクトのパッケージ化、起動、最適化Vueプロジェクトのパッケージ化プロジェクトホステ...

Vue.jsはElement-uiを使用してナビゲーションメニューを実装します

この記事では、Element-uiを使用してvue.jsでナビゲーションメニューを実装するための具体...

nginx のロケーションと書き換えの使用法の詳細な説明

1. 位置情報の利用状況の概要ロケーションは、さまざまな処理方法に対してさまざまな種類のリクエストを...

ウェブページで CSS スタイルを適用するさまざまな形式の概要

1. インライン スタイル (<body></body> 内に配置されます)...

Docker で SVN サーバーを構築するチュートリアル

SVN は Subversion の略称で、ブランチ管理システムを使用して効率的に管理するオープンソ...

HTML文書の基本構造(Webページ作成の基礎知識)

HTMLの動作原理: 1. ローカル操作: ブラウザでhtmlファイルを開く2. リモートアクセス...

Centos7環境でMySQL 5.6のインスタンスを複数作成する方法の詳細な説明

この記事では、CentOS 7 環境で MySQL 5.6 の複数のインスタンスを作成する方法につい...

CentOS 7 に Percona Server+MySQL をインストールする

1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...