CSSでドロップシャドウをつける
今回はCSSでドロップシャドウ(影)をつける方法をメモ
CSSでシャドウをつける方法は
1.ボックス要素にドロップシャドウ
2.テキストにドロップシャドウ
の2種類あります。
ボックスシャドウ
ボックスシャドウは
box-shadow: 横のズレ 縦のズレ ぼかし シャドウの色;
と記述し、具体的には
box-shadow: 1px 1px 5px #333; -moz-box-shadow: 1px 1px 5px #333; /* Firefox用*/ -webkit-box-shadow: 1px 1px 5px #333; /* Google Chrome, Safari用*/
のように記述します。
また、複数指定する場合は
box-shadow: 1px 1px 5px #333, -1px -1px 5px #333;
のように,(カンマ)で区切ります。
テキストシャドウ
テキストシャドウをつける場合は
text-shadow: 横のズレ 縦のズレ ぼかし シャドウの色;
と記述し、具体的には
text-shadow: 1px 1px 5px #333; -moz-text-shadow: 1px 1px 5px #333; /* Firefox用*/ -webkit-text-shadow: 1px 1px 5px #333; /* Google Chrome, Safari用*/
と記述します。
テキストシャドウもボックスシャドウと同じく
複数指定する場合は,(カンマ)で区切ります。
※注意点としてこれらのプロパティはCSS3に非対応のIE6~8では表示されません。
もしIE6~8でも表示させたい場合は
> [CSS]IE6/7/8でもCSS3のようにボックスにシャドウをつけるスタイルシート
のサイト様に書かれているので参考にしてみてください。
CSSのおすすめ参考書
ポチップ