このページの本文へ

text-shadowで作る「見出し」デザインのアイデア

2011年02月01日 11時00分更新

菊池 崇

  • この記事をはてなブックマークに追加
本文印刷
css3

 text-shadowプロパティはテキストとtext-decorationに対して影を1つもしくは複数つけられるプロパティだ。もともとはCSS2で定義されたものの、ブラウザーの実装が進まなかったためCSS 2.1でいったん削除され、CSS3のtext-moduleとして復活した。

 text-shadowはCSS3の中でもっとも基本的なプロパティの1つと考えられているが、アイデア次第で大きな効果を得られるプロパティでもある。今回のCSS3道場は、text-shadowを使ってリッチな「見出し」をデザインしてみよう。なお、text-shadowはほとんどのモダンブラウザーに実装されているが、残念ながらInternet Explorer 9 ベータ版ではサポートされていない。

text-shadowプロパティの基本の記述

 サンプルを紹介する前にtext-shadowプロパティの基本的な記述方法を確認しておこう。

text-shadowの基本

 text-shadowプロパティの値は、右方向へのズレ(距離)/下方向へのズレ(距離)/ぼやけ具合/影の色の順に記述する。影の色は#を使った16進数法(#HEX)/RGB(a)/ HSL(a) のいずれかの方法で指定する。

IE Firefox Safari Opera Chrome
3.5+ 1+ 9+ 1+
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く