影の組み合わせで3D風のテキスト見出し
text-shadowの影は1つだけではなく複数指定できる。複数の影を組み合わせてレイヤーを表現し、3D風の見出しを作ってみよう。
まずはtext-shadowを1つだけ指定した場合のサンプルだ。
■HTML[サンプル4]
<p>Web Directions</p>
■CSS[サンプル4]
p {
text-shadow :
6px 6px 0 #444; }
サンプル4の実実行画面。影を1つだけ指定した状態
サンプル4をベースに、text-shadowに6つの値を指定したのがサンプル5だ。text-shadowに複数の値を指定するときは以下のようにカンマ区切りで記述する。
■CSS[サンプル5]
p {
text-shadow :
1px 1px 0 #CCC,
2px 2px 0 #CCC,
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444; }
サンプル5の実行画面。6つの影を重ねてレイヤーを表現している
◆
text-shadowを使った見出しデザインのアイデアをいくつか紹介してきたが、いかがだっただろうか。text-shadowはシンプルな記述で使いやすく、コードをわずかに書き換えるだけで手軽にデザインできる点が魅力だ。サンプルを触りながら、自分なりのバリエーションを考えてみてほしい。
サンプルのダウンロード
著者：菊池 崇（きくち・たかし）
Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。
