box-shadowの使い方について、解説します。CSS3の登場によって、かつては画像で作っていたボタンなどのパーツをCSSだけで表現できるようになりました。角丸やボーダーに画像を設定するなど色々できるようになりましたが、今回はボックスに影をつけてオブジェクトをかっこ良くする方法を解説します。
CSSを覚えていなくても色々な効果を作れるサービスもまとめていますので、参考にしてください。
CSS3ジェネレーター8選
目次
box-shadowで実際に作ってみます
※モダンブラウザでないと確認できませんので、ご了承ください。
右下に影を表示
box-shadow:5px 5px 8px 3px #ccc;
真下だけに影を表示
box-shadow:0px 20px 8px -8px #ccc;
影の広さにマイナスの値を設定することでボックスがふんわり浮かんだようなエフェクトになります。
上下左右均等に影を表示
box-shadow:0px 0px 8px 3px #ccc;
ぼかしのない影を表示
box-shadow:8px 8px 0px -3px #ccc;
影の広さを-3pxとしたのは0pxと指定した場合より、狭くする為です。
ボックスの内側に影を表示
box-shadow:5px 5px 8px 3px #ccc inset;
内側に影を表示したい場合はinsetを最後につける事で可能となります。
内側に上下左右均等に影を表示
box-shadow:0px 0px 8px 3px #ccc inset;
Appleのサイトのようなに、マウスオーバーの選択範囲などにも使えそうですね。
内側の下に影を表示
box-shadow:0px -8px 8px -1px #ccc inset;
ベンダープレッフィックスをつけた場合：ベンダープレッフィックスとは各ブラウザでCSS3の実装を反映させる仕様です。
-ms-box-shadow:0px -8px 8px -1px #ccc inset;
-moz-box-shadow:0px -8px 8px -1px #ccc inset;
-webkit-box-shadow:0px -8px 8px -1px #ccc inset;
-o-box-shadow:0px -8px 8px -1px #ccc inset;
box-shadow:0px -8px 8px -1px #ccc inset;
box-shadowはいかがでしたか。今までだと、画像に影をつけたり、backgroundに背景画像をつけるなど、とても面倒でしたが、ずいぶんとやりやすくなりました。
box-shadowを使う事でWEBサイトの表現の幅が広がると思います。コンテンツの分類や目立たせたい場所に気軽に適用できるのが便利ですね。
制作のヒント
上記で掲載した方法は基本的なもので簡単に実現できます。もっとおしゃれなエフェクトを実現したい方、例えば、写真の右下だけにうっすらと影があるとか、影のカーブをなめらかにしたいとか、上下に影を表示したいなどという要望もあると思います。その場合はCSSの擬似要素:afterや:beforeに対してbox-shadowをかけることで可能です。基本以上の効果が欲しい方は検索してみてください。
関連ページ
CSSジェネレーターを使うと覚えておくのが難しいCSS効果を簡単に作れます。こちらのページも時間がある時にご覧ください。
・CSS3ジェネレーター8選
・スマートフォンサイト制作に役立つCSS
