css3から画像や文字にドロップシャドウの適用が可能になりました。
使ってみたら調子が良かったのでメモ。

今回使うのはこのプロパティ

.dropshadow{
    -webkit-box-shadow: 10px 10px 6px -6px #777777;
       -moz-box-shadow: 10px 10px 6px -6px #777777;
            box-shadow: 10px 10px 6px -6px #777777;
}

“-webkit”はAppleが定めた独自拡張のCSSです。
もともとはsafariのレンダリングエンジンとして開発されました。

“-moz”はMozillaが定めた独自拡張のCSSです。
FireFoxのレンダリングエンジンとして開発されました。

そして接頭辞のついていないものがCSS3で定められたドロップシャドウです。
“-webkit”も”-moz”もCSS3の登場によって無印box-shadowに統一されますので、今後開発の際には使ってはイケマセン。

しかし未だcss3は過渡期であり、css3をサポートしておらず、かつ”-moz”や”-webkit”をサポートしているブラウザが多いため、より多くのブラウザでドロップシャドウが見えるように一応定義しています。

では早速実験。

■ ドロップシャドウ：適用してみる

まずは通常のイメージ

次にドロップシャドウを適用してみます。

どうでしょう？ちょっと良い感じじゃないですか？

■ ドロップシャドウ：プロパティの意味

と言う事で、それぞれの引数の意味をメモ。

.dropshadow{
    -webkit-box-shadow: 10px 10px 6px -6px #777777;
       -moz-box-shadow: 10px 10px 6px -6px #777777;
            box-shadow: 10px 10px 6px -6px #777777;
}

• １つ目の10pxは水平方向の影のオフセットです。正の値で右側へ、負の値で左側へ影が移動します。
• ２つ目の10pxは垂直方向の影のオフセットです。正の値で下側へ、負の値で上側へ影が移動します。
• ３つ目の6pxはぼかしの距離です。負の値は設定できません。値が大きいほど影がボケます。
• ４つ目の-6pxは影の大きさです。正の値で大きく、負の値で小さくなります。

影の大きさについては試しに-20pxにしてみたら上の例では影はなくなってしまいました。
色の値を指定すると、影はその色になります。
insetキーワードの指定で、内側の影を作る事もできます。画像には適用できないようです。

.dropshadow{
    -webkit-box-shadow: 10px 10px 10px 10px #777777 inset;
       -moz-box-shadow: 10px 10px 10px 10px #777777 inset;
            box-shadow: 10px 10px 10px 10px #777777 inset;
}

end