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 メールを作成するためのヒント
この記事では、スライド選択効果を実現するピッカーをシミュレートするjQueryの具体的なコードを参考...
目次データベースにインデックスが必要なのはなぜですか?インデックスが B+Tree データ構造を使用...
提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。デフォルトでは、&l...
スレッドが同時に実行される場合、スレッドがリソースを競合してデータの曖昧さが生じるのを防ぐために、重...
目次初期ビューVue開発環境の構築Vueインスタンスの作成Vue テンプレート構文Vue データバイ...
序文最近、友人がSQLを書くときにnull値を判定する方法が間違っていて、プログラム内のデータにエラ...
これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点...
以下に記録されているように、WIN10システムにMYSQLをダウンロードしてインストールするための詳...
実稼働環境で起こる最も嬉しいことは、シナリオによっては、更新または削除時にパラメータを無視せざるを得...
1. Linuxサーバーは、/etc/hosts.denyを設定して、相手のIPがSSH経由でサー...
1. 角を丸くする今日の Web デザインは、常に最新の開発テクノロジーに追随しており、HTML5 ...
この効果を実現するには、まず CSS のプロパティを知っておく必要があります。 text-shado...
ステップ1: ローカルイーサネットプロパティをチェックして、VMwareブリッジプロトコルがインスト...
<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...
単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...