写真に影を付ける

写真の角を丸くする方法 は前回お話ししました。

今回は、写真に 影を付ける方法を説明します。

これも すごく簡単な方法なんですが、
残念ながら 対応していない プラウザがあるのが残念です。

後日、非対応プラウザに対する 補正方法をお伝えします。

img {
	-webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
	-webkit-box-shadow: 4px 4px 0px rgba(0,0,0,0.6);
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
	box-shadow: 4px 4px 4px rgba(0,0,0,0.8);
}

-webkit-box-shadow: は サファリ限定対応の為に、
-moz-box-shadow: は FireFox 限定対応の為
box-shadow は それ以外のプラウザ対応用です。

同じように 角丸対応にも
-webkit-border-radius:10px; 
-moz-border-radius:10px;
border-radius:10px;
と記述していますが、サファリ、FireFoxは既に対応しているようです。

参考になりましたか? 
Yesの方は右のバナーをクリックしてください ⇒ ブログ村 ブログノウハウ

コメントを残す

*