Coder's Note

CSS3メモ「box-shadow」の使い方

要素にドロップシャドウをつけることができるbox-shadow。これが当たり前に使えるようになったらデザイナーさんからドロップシャドウに関しての数値をもらわないといけなくなりますが、とっても便利なプロパティです。使い方は簡単なんですが、自分で自分の記憶力が信用できないのでメモ代わりに書いておこうと思います。

対応ブラウザ

外側の影と内側の影では対応ブラウザが異なります。また、Safari/Chromeは-webkit-、Firefoxは-moz-というベンダープリフィックスをつける必要があります。

外側の影

  • Safari3+
  • Chrome
  • Firefox3.5+
  • Opera10.50+

内側の影

  • Chrome
  • Firefox3.5+

使い方

box-shadow: [横方向] [縦方向] [ぼかし具合] [色];

横方向と縦方向を0にするとPhotoshopで言うところの光彩、Fireworksでいうところのグローのような感じになります。

こんなこともできる！

box-shadowを使うとこんなこともできます。（box-shadow以外にも色々使っていますが…）

CSS3ってとっても便利です。

text-shadow: 1px 1px 0 #000;
border: 1px solid #aaa;
background-color: #BE3C14;
background-image:
    gradient(
        linear,
        left top, left bottom,
        from(rgba(0,0,0,0)), to(rgba(255,255,255,0.3))
    );
box-shadow:
    0px 3px  10px rgba(0,0,0,0.3),
    inset 0 0 5px rgba(0,0,0,0.5);

デモ（外側の影）

簡単なデモ。画像は使っておりません！

box-shadowのデモ。外側に影が見えていますか？

 box-shadow: 5px 5px 2px #2B3C45;
-webkit-box-shadow: 5px 5px 2px #2B3C45;
-moz-box-shadow: 5px 5px 2px #2B3C45;

デモ（内側の影）

内側に影をつけたいときは値の先頭にinsetをつけてください。

box-shadowのデモ。内側に影が見えていますか？

box-shadow: inset 5px 5px 2px #BE3C14;
-webkit-box-shadow: inset 5px 5px 2px #BE3C14;
-moz-box-shadow: inset 5px 5px 2px #BE3C14;

デモ（複数の影）

半角カンマで区切ることで影を複数個つけることもできます。

外側に影が見えますか？

内側に影が見えますか？

外側と内側に影が見えますか？

/* 外側に2つ */
box-shadow: 5px 5px 2px #2B3C45, -5px -5px 2px #BE3C14;
-webkit-box-shadow: 5px 5px 2px #2B3C45, -5px -5px 2px #BE3C14;
-moz-box-shadow: 5px 5px 2px #2B3C45, -5px -5px 2px #BE3C14;

/* 内側に2つ */
box-shadow: inset 5px 5px 2px #2B3C45, inset -5px -5px 2px #BE3C14;
-webkit-box-shadow: inset 5px 5px 2px #2B3C45, inset -5px -5px 2px #BE3C14;
-moz-box-shadow: inset 5px 5px 2px #2B3C45, inset -5px -5px 2px #BE3C14;

/* 外側と内側 */
box-shadow: 5px 5px 2px #2B3C45, inset 5px 5px 2px #BE3C14;
-webkit-box-shadow: 5px 5px 2px #2B3C45, inset 5px 5px 2px #BE3C14;
-moz-box-shadow: 5px 5px 2px #2B3C45, inset 5px 5px 2px #BE3C14;