box-shadowを使った面白演出 - CSS3で遊んでみる4

カテゴリ:CSS3関連 2010年3月 8日 14:04

box-shadowサンプル

今回のネタは、box-shadow を使った、ちょっと面白い演出とデザインの紹介です。
box-shadow は現在、最初に書かれていた仕様の CSS Backgrounds and Borders Module Level 3 からは削除されおり、まだ策定中の段階ですが、先日リリースされた Opera10.50 ではベンダープレフィクスが取れた状態で使用できるようになっています。(なぜ・・・?)

そのため、Firefox や WebKit 系ブラウザで使うには-moz--webkit-のベンダープレフィクスが必要です。

また今回のネタでは、transition プロパティに対応している WebKit のみ、アニメーションの演出を見ることができます。
いちおう Opera10.50 でも transiton には対応したのですが、box-shadow へのアニメーションは適用されませんでした。

ということで、百聞は一見にしかず、ということでデモを見てください。

▼EntryMore▼

今回のネタの解説

今回使用しているのはbox-shadowがほとんどです。
box-shadow の使い方は以下の通りです。(※現在は草案からも消えているので、今後仕様が変更される可能性があります[2010/03/06 現在]。下の書式については、mozilla developer center を参考にしました)

inset は、Photoshop で言うところのシャドウ内側に当たる指定になります。
続いて左から順に、X 座標のずれ、Y 座標のずれ、ぼかしの度合い、シャドウの幅、色、となります。
offset-x, offset-y, spread-radius に関してはマイナス値も指定することができます。

inset を指定すると、効果がボックスの内側に作用するようになります。今回のネタは、この inset を使ったテクニックです。

box-shadow の値は複数指定することができる

デモのソースを見てもらうと分かりますが、box-shadow プロパティの値には、複数の値を指定することができます。(指定する場合は、カンマ区切りで列挙します)
つまり、外側に普通のドロップシャドウをつけつつ、inset を利用してちょっとした装飾ができる、というわけです。例えば、

上記のように、カンマ区切りで外側のシャドウと、内側に 1px のボーダーのようなシャドウを指定することができます。
内側に 1px のハイライトを入れることによって、立体感を増し、よりディティールを意識したボタンをデザインすることができるようになります。

またカラーには RGBa も使えるので、透明度を調整することで色を直接指定するよりも直感的にデザインすることができます。

幅のサイズを変更したり、X 座標のずれを調整したりすることを複数指定でいくつも適用することで面白い演出が可能です。
Photoshop のレイヤースタイルでやるようなことが結構実現できると思うので、色々いじってみてはどうでしょうか。

画像は一切使用していません

ちなみに、今回のサンプルでは画像を一切使っていません。グラデーションも CSS3 の機能を使って描いています。
そのため、Firefox3.6、Google Chrome, Safari でしか正常に動作しません。

グラデーションの指定は結構めんどくさいですが、以前作った Photoshopライクな操作で手軽に作れるCSS3ジェネレーター を使うと、比較的簡単にグラデーションのソースが生成できるので、よかったら利用してみてください。

この記事のカテゴリー一覧を見る⇒CSS3関連

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/176