(141) CSSで虹色文字にする。

投稿者: | 2023年3月23日

209 views

この記事は最終更新から 424日 が経過しています。

1. やりたいこと

文字色をグラデーションさせたい。
画像を用意せず、CSSだけでこれを実現したい。

2. やってみる

(1) シンプルに赤→青 (0度)

文字の下側の矩形領域は、文字背景に使っているグラデーションを確認するためだけに表示している。
https://www.dogrow.net/hp/sample/00141/01

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>BLOG No.141</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>虹色文字</p><br />
    <div></div>
   </body>
</html>

style.css

p{
  margin: 1rem;
  font-size: 4rem;
  font-weight: bold;
  display: inline-block; /* グラデーション範囲を狭めるため */
  line-height: 1;        /* 文字の上下の余白分もグラデーション領域に消費されることを回避 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-image: linear-gradient(#FF0000, #0000FF);
}

div{
  display: inline-block;		/* グラデーション範囲を狭めるため */
  height: 20rem;
  width: 20rem;
  background-image: linear-gradient(#FF0000, #0000FF);
}

(2) シンプルに赤→青 (時計回りに90度)

HTMLは同じ。CSSだけ変えた。
https://www.dogrow.net/hp/sample/00141/02/

style.css

p{
  margin: 1rem;
  font-size: 4rem;
  font-weight: bold;
  display: inline-block; /* グラデーション範囲を狭めるため */
  line-height: 1;        /* 文字の上下の余白分もグラデーション領域に消費されることを回避 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-image: linear-gradient(90deg, #FF0000, #0000FF);
}

div{
  display: inline-block; /* グラデーション範囲を狭めるため */
  height: 20rem;
  width: 20rem;
  background-image: linear-gradient(90deg, #FF0000, #0000FF);
}

(3) 赤→緑→青の3色グラデーション (時計回りに120度)

HTMLは同じ。CSSだけ変えた。
https://www.dogrow.net/hp/sample/00141/03/

style.css

p{
  margin: 1rem;
  font-size: 4rem;
  font-weight: bold;
  display: inline-block; /* グラデーション範囲を狭めるため */
  line-height: 1;        /* 文字の上下の余白分もグラデーション領域に消費されることを回避 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-image: linear-gradient(120deg, #FF0000 0%, #00FF00 50%, #0000FF 100%);
}

div{
  display: inline-block; /* グラデーション範囲を狭めるため */
  height: 20rem;
  width: 20rem;
  background-image: linear-gradient(120deg, #FF0000 0%, #00FF00 50%, #0000FF 100%);
}

(4) 応用、文字の塗りつぶしに画像ファイルを使う

HTMLは同じ。CSSだけ変えた。
絵心がないために汚いノイズ文字になってしまったが、水玉等きれいな背景画像を使えば見栄えもよさそうだ。
https://www.dogrow.net/hp/sample/00141/04/

style.css

p{
  margin: 1rem;
  font-size: 4rem;
  font-weight: bold;
  display: inline-block; /* グラデーション範囲を狭めるため */
  line-height: 1;        /* 文字の上下の余白分もグラデーション領域に消費されることを回避 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-image: linear-gradient(90deg, #FF0000, #0000FF);
}

div{
  display: inline-block; /* グラデーション範囲を狭めるため */
  height: 20rem;
  width: 20rem;
  background-image: linear-gradient(90deg, #FF0000, #0000FF);
}

カテゴリー: CSS

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)