見出しをCSSで装飾する(文字に影をつける)

見出しをCSSで装飾する(文字に影をつける)見出しをCSSで装飾する(文字に影をつける)の表示例

見出しの文字に影をつけます。「text-shadow」というプロパティを使いますが、IEは対応していません。「ie-css3.htc」のライブラリを使えば影はつきますが、あまり美しくありません。またIE9は未対応です。

text-shadow: 5px 5px 7px #666;

のように記述します。記述内容の順序は以下の通り。

1つ目の数字
X軸方向へのすれを指定します。正の値は右方向へのずれ、負の値は左方向へのずれを表します。
2つ目の数字
Y軸方向のずれを指定します。正の値は下方向のずれ、負の値は上方向のずれを表します。
3つ目の数字
影をぼかす範囲を指定します。
色の指定
カラーコードで影の色を指定します。

HTML/XHTML

<body> ~ </body>内に以下を記述します。

<h1 class="shadow1">見出しh1に「shadow1」の影をつける</h1>
<h1 class="shadow2">見出しh1に「shadow2」の影をつける</h1>
<h1 class="shadow3">見出しh1に「shadow3」の影をつける</h1>
<h1 class="shadow4">見出しh1に「shadow4」の影をつける</h1>
<h1 class="shadow5">見出しh1に「shadow5」の影をつける</h1>

CSS記述例

<head> ~ </head>内に以下を記述します。

<style type="text/css">
<!--
h1 { padding: 10px; }
h1.shadow1 { text-shadow: 5px 5px 7px #666; }
h1.shadow2 { text-shadow: 20px 10px 7px #666; }
h1.shadow3 { text-shadow: 2px 2px 2px #666 , 0 0 20px #708090; }
h1.shadow4 { text-shadow: 2px 2px 2px #666 , 0 0 0.4em #daa520; }
h1.shadow5 { text-shadow: 1px 1px 1px #FFF , 1px 1px 3px #000 , 0 0 0.6em #4b0082; }
-->
</style>

見出しをCSSで装飾する(文字に影をつける)の表示例

IEへの対応

ie-css3.htc」のライブラリをダウンロードし、サーバーへアップロードします。そしてCSSの記述に「ie-css3.htc」へのリンクを記述します。

<style type="text/css">
<!--
h1 { padding: 10px; url(ie-css3.htc); }
h1.shadow1 { text-shadow: 5px 5px 7px #666; }
h1.shadow2 { text-shadow: 20px 10px 7px #666; }
h1.shadow3 { text-shadow: 2px 2px 2px #666 , 0 0 20px #708090; }
h1.shadow4 { text-shadow: 2px 2px 2px #666 , 0 0 0.4em #daa520; }
h1.shadow5 { text-shadow: 1px 1px 1px #FFF , 1px 1px 3px #000 , 0 0 0.6em #4b0082; }
-->
</style>

見出しをCSSで装飾する(文字に影をつける)の表示例IE対応

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録