【CSS3】テキストに背景画像やグラデーションを設定する

css3のプロパティ”background-clip”というやつを使うと、テキストの形で背景を切り抜くことができます。

背景を画像じゃなくてグラデーションにすればcssだけで実現できるので、webフォントと組み合わせたりすると見出しの作成などが捗りそうですね。

background-clipを設定しないと…

こうなって

background-clipを設定すると…

こうなりますね。

注意事項

注意事項としては、今のところ

  • “-webkit-“のベンダープリフィックスが必要
  • テキスト色を透明にしておく
  • background-clipはbackgroundの後に入れましょう

というところでしょうかね。

今日は簡単にこんな感じで。