2006年07月21日
CSSで文字に影を付ける 今後、IEとFirefoxに対応して欲しい「text-shadow」タグ
WindowsのメインブラウザーIEで今後対応して欲しいCSSのタグと言えば、「text-shadow」タグですね。
当ブログでは、各記事のタイトルには、この「text-shadow」タグを使っています。
この「text-shadow」タグを使うと、文字に影を付けることができるんです。
ただし、現状ではこのタグに対応しているのは、MacintoshのメインブラウザーのSafariだけです。
Movable TypeのデフォルトのCSSにも、この「text-shadow」タグは使われているので、IE7には是非対応して欲しいCSSのタグですね。（現状のIE7 Beta版では対応してないようです。）
ちなみに、MacintoshのSafariブラウザーで見ると、当ブログの記事のタイトルはこんな感じで影が付き、まるで画像のように見えます。
ちなみに、Mac版のFirefoxで見ると、こんな感じで影が付きません。
IEでも同様です。
当ブログのCSSには、記事のタイトルにこのようなタグをCSSに書いています。
最初の「#CCC」は影の色を設定するプロパティです。「#CCC」という色は薄いグレーですね。もっと、影を濃くしたい場合は、「#999」とかにしてみて下さい。
２番目の「2px」は影の左右の位置を設定するプロパティです。例えば、「5px」とかにすると、かなり右に影が移動します。逆に「-2px」にすると、影が文字の左側にきます。
３番目の「2px」は影の上下の位置を設定するプロパティです。例えば、「5px」とかにすると、かなり下に影が移動します。逆に「-2px」にすると、影が文字の上にきます。
最後の「2px」は影のぼかし具合を設定するプロパティです。例えば、「5px」とかにすると、かなり影のぼかしが強くなります。「0px」にすると、影のぼかしがなくなります。
当ブログの場合は、微妙な感じで影を演出したかったので、あまり影が目立たない設定にしてあります。
それでも、テキストに影があるのとないのとでは、だいぶ印象が違うかなぁーと思いますね。
