テキストに影をつけるtext-shadowプロパティ

CSSのtext-shadowプロパティを使うと、簡単にテキストに影をつけることができます。
サポートブラウザはSafari、FF3.5、Operaなどです。IEには効かないので、モダンブラウザ用に“おまけ”として使用するのがいいかもしれません。IEの場合、filterを使用して実現が可能です。

基本的な使い方

text-shadowプロパティを使います。プロパティは左から “X座標・Y座標・ぼかし具合・色” となります。

h1 {
 color:#F30;
 text-shadow: 2px 2px 3px #999;
}

それでもIEで使いたい場合

IEの場合、filterを利用しますが、かなりクセがあるので要注意です。
まずwidthプロパティが必須です。autoやinheritは効きませんので、pxや%など、数値で入力する必要があります。さらに、color部分を3桁省略（例：#999など）ができません。
左から “色・X座標・Y座標・通常表示” となります。Positiveの値をfalseにすると影が反転します。
text-shadowと併用する場合はwidthを使わなければいけない関係でハックを使用した方がいいかもしれません。

h1 {
 color:#F30;
 filter: DropShadow(Color=#999999, OffX=2, OffY=2, Positive=true);
 width:100%;
}

サンプルファイルをダウンロード

Posted in css
Tags: text-shadow