CSSで要素に影をつけるbox-shadowの使い方

今回は要素に影をつけるbox-shadowの使い方を紹介します。

 

box-shadowの使い方

使い方としては、例えば以下のような感じです。

box-shadow:5px 5px 8px 3px #ccc;

値と順番は「右方向、下方向、ぼかし、拡張、色」となっています。

上の場合、「右方向に5px、下方向に5px、8pxぼかし、3px影を大きくする」というスタイルになります。なのでボックスの右下に影ができることになりますね。

また、マイナスの値を指定することもできます。色は16進数だけでなくrgbaでも指定可能です。

では使用例をいくつか紹介していきます。

 

真下に影を表示

box-shadow:0px 20px 8px -8px #ccc;

拡張にマイナスの値を指定して、影を小さくしています。

これによって要素は上方向にふわっと浮かんでいるように見えます。

 

上下左右に影を表示

box-shadow:0px 0px 8px 3px #ccc;

要素の周り全体に影ができます。真上から見たようなイメージでしょうか。

 

ぼかしのない影を表示

box-shadow:8px 8px 0px -3px #ccc;

ぼかしの値を0にすることでぼかしのない影を表示することができます。

ぼかしのない状態で上下左右に表示すればborderの代わりのように使うこともできます。

 

内側に影を表示

box-shadow:5px 5px 8px 3px #ccc inset;

box-shadowは要素に内側に表示することも可能です。

内側に表示したい場合は最後にinsetキーワードをつけることでできます。

影を内側に表示すると凹んでいるように見えますね。

 

上下左右に内側の影を表示

box-shadow:0px 0px 8px 3px #ccc inset;

要素の上下左右に内側に影を表示しています。

要素に奥行きが出て立体的に見えます。

 

 内側の下に影を表示

box-shadow:0px -8px 8px -1px #ccc inset;

上からボックスによって影ができていることを表現したいときに使えそうです。

 

ベンダーインプレックス

現在の腫瘍はブラウザではほとんどサポートされているので基本的にベンダーインプレックスは必要ありませんが、古いブラウザにも表示したい場合は念の為つけておきましょう。

-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を紹介しました。

box-shadowを使って影を作ると奥行きや立体感、浮遊感を簡単に表現できるため、かなり使いどころは多いと思います。

多くのサイトはブログにも取り入れられているので、使いこなせるようにしておくと便利です。