CSS3 text-shadow box-shadow の使い方
テキストに影をつける text-shadow ボックス要素に影をつける box-shadow は今後必須のプロパティになりそうな気がするので使い方などをまとめておきたいと思います。
text-shadow の使い方
名前の通りテキストに影をつけてくれるプロパティです。
デザインをする際ドロップシャドウを使う事は多々あると思うですが、それが CSS で出来ると思ってくれたら良いかと思います。
指定方法
text-shadow: 1px 1px 3px #000;
カンマ「,」区切りで複数指定ができます。
text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #000;
box-shadow の使い方
名前の通りボックスに影をつけてくれるプロパティです。
デザインをする際ドロップシャドウやグロー（光彩）を使う事は多々あると思うですが、それが CSS で出来ると思ってくれたら良いかと思います。
指定方法
-moz-box-shadow: 1px 1px 3px #000; /* Firefox用 */
-webkit-box-shadow: 1px 1px 3px #000; /* Safari,Google Chrome用 */
カンマ「,」区切りで複数指定ができます。
-moz-box-shadow: 0 0 4px #F00, 0 0 12px #000, 5px 5px 5px #000;
-webkit-box-shadow: 0 0 4px #F00, 0 0 12px #000, 5px 5px 5px #000;
IE にも適応させた場合
IEでCSS3のドロップシャドウを使いたいを参考にして下さい。
