[CSS]CSSでdivボックスにシャドウをつけてみました(IE対応)

2011年6月19日


IE6/7/8でもCSS3のようにボックスにシャドウをつけるスタイルシート | コリス

ソースコードは概ねこんな感じで。組み込み時にclass名のカスタマイズが必要だと思う。
私はcontainerを元々あったmainにしてしまいましたが。

  

ボックスの中身

スタイルシートに以下を記述。こちらはIE以外のブラウザ用の記述です。
.container {padding-left:10px;}
.shadow {float:left;}
.frame {position:relative; background:#fff; padding:10px; display:block;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
.clear {clear:left;}

head部に以下を記述。こちらはIE用の記述です。

ほんとはIE用もスタイルシートに記述したかったのだが、6,7,8それぞれのハックがめんどくてhead部にしてしまいました。
後々もっとスマートな方法を考えようと思います。