Webページで文字がグラデーションして表示されているものがあります。
どうやって実現するのでしょうか？テキスト選択できましたので、SVG画像ではなくテキストだと思います。
文字をグラデーションで表現するには、背景をグラデーションで作成し、文字を透明色で表示し、背景を文字でクリッピングすることで
グラデーションした文字を表現できます。
以下のHTML,CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="GradientText.css" />
</head>
<body>
<h1>グラデーションするテキストのデモ</h1>
<div class="GradientText">iPentec Web Demo</div>
</body>
</html>
.GradientText {
font-size: 64px;
font-weight:700;
background: linear-gradient(90deg, #7c3aed, #ff0000, #ff6a00);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
GradientTextがグラデーションする文字を表現するクラスです。
以下のコードでグラデーションの背景を作成します。
linear-gradientの最初のパラメータに 90degを指定することで、左から右へのグラデーション表現になります。
background: linear-gradient(90deg, #7c3aed, #ff0000, #ff6a00);
下記のbackground-clipプロパティが文字でマスクする設定です。
-webkit-background-clip: text;
background-clip: text;
文字列のカラーは透明色にして背景色が見える状態にします。
color: transparent;
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
テキストがグラデーション表示されていることが確認できます。
同様の設定をした場合でも、グラデーションのテキストが表示されない場合があります。これは、
backgroundの記述より手前に-webkit-background-clip, background-clip を記述した場合には正しく表示されません。
これは、background-clip でクリップされた設定が、その後のbackground設定の際に解除されてしまうためです。
以下はうまく表示できないCSSの設定になります。
.GradientTextNG {
font-size: 64px;
font-weight: 700;
-webkit-background-clip: text;
background-clip: text;
background: linear-gradient(90deg, #7c3aed, #ff0000, #ff6a00);
color: transparent;
}
文字列にGradientTextNGクラスを設定し、ページを表示した場合が下図です。グラデーションの背景のみが表示され、
文字列でマスクされた表示にはならないことが確認できます。
