このページの本文へ

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

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

文●菊池 崇

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

影の組み合わせで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」の発起人。


前へ 1 2 3 4 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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

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

すぐに役立つ!プロの解説記事
一覧へ
Web Professionalの本
一覧へ