カテゴリ：CSS3関連 2010年3月 8日 14:04
今回のネタは、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 を参考にしました）n
inset は、Photoshop で言うところのシャドウ内側に当たる指定になります。
続いて左から順に、X 座標のずれ、Y 座標のずれ、ぼかしの度合い、シャドウの幅、色、となります。
offset-x, offset-y, spread-radius に関してはマイナス値も指定することができます。
inset を指定すると、効果がボックスの内側に作用するようになります。今回のネタは、この inset を使ったテクニックです。n
デモのソースを見てもらうと分かりますが、box-shadow プロパティの値には、複数の値を指定することができます。（指定する場合は、カンマ区切りで列挙します）
つまり、外側に普通のドロップシャドウをつけつつ、inset を利用してちょっとした装飾ができる、というわけです。例えば、n
上記のように、カンマ区切りで外側のシャドウと、内側に 1px のボーダーのようなシャドウを指定することができます。
内側に 1px のハイライトを入れることによって、立体感を増し、よりディティールを意識したボタンをデザインすることができるようになります。n
またカラーには RGBa も使えるので、透明度を調整することで色を直接指定するよりも直感的にデザインすることができます。n
幅のサイズを変更したり、X 座標のずれを調整したりすることを複数指定でいくつも適用することで面白い演出が可能です。
Photoshop のレイヤースタイルでやるようなことが結構実現できると思うので、色々いじってみてはどうでしょうか。n
ちなみに、今回のサンプルでは画像を一切使っていません。グラデーションも CSS3 の機能を使って描いています。
そのため、Firefox3.6、Google Chrome, Safari でしか正常に動作しません。
グラデーションの指定は結構めんどくさいですが、以前作った Photoshopライクな操作で手軽に作れるCSS3ジェネレーター を使うと、比較的簡単にグラデーションのソースが生成できるので、よかったら利用してみてください。n
この記事のカテゴリー一覧を見る⇒CSS3関連
トラックバックURL
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009-2010 CSS-EBLOG All Rights Reserved
コメント
1 - MIYA さん
CSS3 のアニメーション楽しいですよね＾＾ちょい話はそれますが CSS3 ネタ書いてるとデモ使うページ XHTML か HTML5 どちらで書けばよいか迷いませんか？＞＜
2010年3月 9日 00:41
2 - えど
さん
>>1 - MIYAさんどもです！
アニメーション楽しいですねー。
あってもなくても他のブラウザには一切影響ないのでさりげなく仕込んだりするときがありますｗ
XHTML と HTML5 ですが、業務ではまだ使えないですが、
こういった個人のブログ内では全然使っていいんじゃないかなーと思ってます。
（むしろ、HTML5 でブログをリニューアルしようかと思ってるくらいですｗ）
2010年3月 9日 12:59