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フィールドのデフォルト値を設定する方法

推薦する

jQuery はピッカーをシミュレートしてスライド選択効果を実現します

この記事では、スライド選択効果を実現するピッカーをシミュレートするjQueryの具体的なコードを参考...

MySQL でインデックスとして B+Tree を使用する利点は何ですか?

目次データベースにインデックスが必要なのはなぜですか?インデックスが B+Tree データ構造を使用...

CSS でより美しいリンクプロンプト効果をカスタマイズする方法

提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。デフォルトでは、&l...

Linux スレッド間の同期と排他制御の知識ポイントのまとめ

スレッドが同時に実行される場合、スレッドがリソースを競合してデータの曖昧さが生じるのを防ぐために、重...

Vue 初心者ガイド: 環境の構築と開始方法

目次初期ビューVue開発環境の構築Vueインスタンスの作成Vue テンプレート構文Vue データバイ...

MySQLの空の値とnull値の違いを知っていますか?

序文最近、友人がSQLを書くときにnull値を判定する方法が間違っていて、プログラム内のデータにエラ...

HTML5で見逃せないAPIやヒントのまとめ

これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点...

MySQL 5.7.19 のインストールと設定方法のグラフィック チュートリアル (win10)

以下に記録されているように、WIN10システムにMYSQLをダウンロードしてインストールするための詳...

CentOS7 で MySQL のスケジュールされた自動バックアップを実装する方法

実稼働環境で起こる最も嬉しいことは、シナリオによっては、更新または削除時にパラメータを無視せざるを得...

LinuxサーバのSSHクラッキング防止方法(推奨)

1. Linuxサーバーは、/etc/hosts.denyを設定して、相手のIPがSSH経由でサー...

ウェブフロントエンド開発者が知っておくべき 9 つの実用的な CSS プロパティ

1. 角を丸くする今日の Web デザインは、常に最新の開発テクノロジーに追随しており、HTML5 ...

CSS3はテキストのレリーフ効果、彫刻効果、炎のテキストを実現します

この効果を実現するには、まず CSS のプロパティを知っておく必要があります。 text-shado...

VMware 仮想マシン ブリッジ モードでインターネットにアクセスできない問題を解決する方法

ステップ1: ローカルイーサネットプロパティをチェックして、VMwareブリッジプロトコルがインスト...

HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。

<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...

MYSQL マスタースレーブ レプリケーションの知識ポイントの概要

単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...