テキストにグラデーションをかける

背景色にグラデーションを指定し、テキストでくり抜くという方法です。現状は対応ブラウザーはGoogle Chrome、Safari、Operaです。

HTML

<h1>Hello, World!</h1>

HTMLはグラデーションにしたいテキストをそのまま記載します。

CSS

h1{
  color: #ACB6E5;//非対応のブラウザでの文字色を設定
  background: -webkit-linear-gradient(0deg, #ACB6E5, #86FDE8);//背景色にグラデーションを指定
  -webkit-background-clip: text;//テキストでくり抜く
  -webkit-text-fill-color: transparent;//くり抜いた部分は背景を表示
}

CSSでは、まず非対応のブラウザーのために文字色を指定しておきます。背景色にグラデーションを指定し、-webkit-background-clip: textを使ってHTMLに指定したテキストでくり抜きます。

ちょっと今風のグラデーションに仕上がりました。

グラデーションの部分を調整することによりさまざまなデザインに応用することができます。

レインボーなグラデーションテキスト

色は何色でも指定することができます。上の画像は3色指定した例です。

CSS

h1{
  color: #FF8C00;
  background: -webkit-linear-gradient(0deg, #40E0D0, #FF8C00, #FF0080);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

ツヤっとしたグラデーションテキスト

グラデーションの角度を変更したり、色を変更する位置を指定することで少しツヤっとした質感を持たせることもできます。

CSS

h1{
  color: #FF7C00;
  background: -webkit-linear-gradient(top, #FFB76B 0%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

メタリックなグラデーションテキスト

工夫次第でこんな感じに少しメタリック風にもできます。

CSS

h1{
  color: #DA8E00;
  background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

テキストの塗りを画像にする

先ほどは背景色にグラデーションを指定していましたが、代わりに画像を指定することも可能です。

HTML

<h1>Hello, World!</h1>

HTMLは先ほどと同じです。このテキストの塗りを好きな画像に設定していきます。

今回は背景画像としてこの木目のテクスチャを使用します。

CSS

h1{
  color: #333;//非対応のブラウザでの文字色を設定
  background: url(images/satin-nuss.jpg);//使用する背景画像のURL
  -webkit-background-clip: text;//テキストでくり抜く
  -webkit-text-fill-color: transparent;//くり抜いた部分は背景を表示
}

background: url('背景画像のURL');で背景画像を設定し、先ほどと同様にテキストでくり抜きます。

するとこのように表示されました。
このように背景画像に好きな画像を用いることで、さまざまな文字のデザインが可能になります。

まとめ

今回はCSS3を使ってテキストにグラデーションをかけたり、文字の塗りに画像を指定する方法を説明しました。
ホームページにうまくグラデーションなどを取り入れて、おしゃれなデザインを目指しましょう。簡単におしゃれにするポイントとしては色を使いすぎないこと。個人的には2〜3色程度のグラデーションが一番きれいかなぁと思っています。
デザインにこだわりすぎて、読みにくくならないようにだけ注意してくださいね！