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 メールを作成するためのヒント
私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...
目次1.entires() メソッドの詳細な構文2.entires() メソッドの一般的な使用法と注...
テーブルを美しくするために、ヘッダーに異なる境界線の色を設定できます。基本的な構文<TH 境界...
<label> タグは、入力要素のラベル (タグ) を定義します。ラベル要素はユーザーに...
目次背景探検する要約する背景テーブルでは、dataTime フィールドは varchar 型に設定さ...
Docker の作成Docker Compose は、複数の Docker コンテナを定義して実行す...
この記事では、スライドタブを実装するためのjQueryの具体的なコードを参考までに紹介します。具体的...
目次Vueプロジェクトのパッケージ化、起動、最適化Vueプロジェクトのパッケージ化プロジェクトホステ...
この記事では、Element-uiを使用してvue.jsでナビゲーションメニューを実装するための具体...
1. 位置情報の利用状況の概要ロケーションは、さまざまな処理方法に対してさまざまな種類のリクエストを...
1. インライン スタイル (<body></body> 内に配置されます)...
SVN は Subversion の略称で、ブランチ管理システムを使用して効率的に管理するオープンソ...
HTMLの動作原理: 1. ローカル操作: ブラウザでhtmlファイルを開く2. リモートアクセス...
この記事では、CentOS 7 環境で MySQL 5.6 の複数のインスタンスを作成する方法につい...
1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...