【CSS】おしゃれな文字装飾サンプル | 文字の下に画像を仕込む

別サイトで雑誌のように綺麗な文字装飾が必要になったため作成。参考まで。

文字の下に画像を仕込む
- Sample1-1 : Normal
グラデーション
- Sample2-1 : 平行方向グラデ
- Sample2-2 : 垂直方向グラデ

文字の下に画像を仕込む

Sample1-1 : Normal

_Sample1-1_Sample1-1_

.title01 {
  text-align: center;
  font-weight:500;
  font-size:3em;
  background-image: url(https://xenonhyx.com/XXXXX.jpg);
 -webkit-background-clip: text;
  color: transparent;
}

仕込んでいる画像はDEVIANT ARTで公開されていた「10 Light Textures – Bokeh Pack II」。大きいと重い&柄がよく見えないため縮尺は適当に変更した。

グラデーション

Sample2-1 : 平行方向グラデ

_Sample2-1_Sample2-1_

.title01 {
  text-align: center;
  font-weight:500;
  font-size:3em;
  color: #014984; /* IE用 */
  background: -webkit-linear-gradient(0deg, #FFF000, #014984);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Sample2-2 : 垂直方向グラデ

_Sample2-2_Sample2-2_

.title01 {
  text-align: center;
  font-weight:500;
  font-size:3em;
  color: #014984; /* IE用 */
  background: -webkit-linear-gradient(#FFF000, #014984);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}