イメージにCSS で陰を付ける

応援よろしく！→

最近、上のバナーや下の写真のように、写真やイラストに薄い陰が付いたヤツ、よく見かけます。



iweb で作ったサイトとかみんなこんな感じです。

これ、ちょっと前まではけっこう作るの面倒くさくて、バックグラウンドの陰をJPEGで作ってその上に写真を表示するみたいな感じで手の込んだCSS書かないと出来なかったんですけど、CSS3のドラフトで仕様が定義され、Firefox やSafari などのブラウザが対応してくれたので劇的に簡単になりました。

.shadow {
box-shadow: 5px 5px 4px #736F6E;
}

これだけです。
最初の数値がX軸でどれだけずらしてシャドウを描くかを定義します。２番目の値がY軸ですね。
３つ目の値がシャドウの角に当たる部分の丸みの半径を定義します。最後の値は陰の色です。スペックを詳しく知りたい方はこちらへどうぞ。

でもこれだと現行のどのブラウザでもきれいに陰が付くわけでもないので、こんな感じにします。こうするとOpera, Firefox, Safari, Chrome などみんなOK です。

.shadow {
-moz-box-shadow: 5px 5px 4px #736F6E;
-webkit-box-shadow: 5px 5px 4px #736F6E;
box-shadow: 5px 5px 4px #736F6E;
}

しかし、マイクロソフトだけは一筋縄じゃありません。IE対応のコードは下記のような感じになります。

.shadow {
-moz-box-shadow: 5px 5px 4px #736F6E;
-webkit-box-shadow: 5px 5px 4px #736F6E;
box-shadow: 5px 5px 4px #736F6E;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#736F6E')";
/* For IE 6 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#736F6E');
}


一応IE7, IE8, それと Chrome, Safari, Firefox の最新版でテストしてみましたが正常に動作するようです。

しかしそろそろマイクロソフトも訳の分からない独自路線を止めてもらいたいもんです。