CSSで要素に影をつける方法/box-shadowプロパティの使い方

cat IT

要素の内側・外側に「影」を付けることができる、box-shadowのご紹介です。

Advertisements

box-shadowの使い方

「影」というとわかりづらいですが、要素に寄り添う別の形を作る機能がbox-shadowです。見てもらったほうが早いので、まずは基本の形から。

要素に影をつける
box-shadow: 横位置 縦位置 ぼかし 広がり 色;

横の移動

横位置を変更するとこのようになります。

box-shadow:20px 0 0 0 grey;

box-shadow:10px 0 0 0 grey;

box-shadow:-20px 0 0 0 grey;

正の数値で右、負の数値で左に向かって影が移動します。

縦の移動

縦位置を変更するとこのようになります。

box-shadow:10px 10px 0 0 grey;

box-shadow:10px 0px 0 0 grey;

box-shadow:10px -10px 0 0 grey;

正の数値で下、負の数値で上に向かって影が移動します。

ぼかし

ぼかしを変更するとこのようになります。

box-shadow:10px 10px -1px 0 grey;

box-shadow:10px 10px 10px 0 grey;

box-shadow:10px 10px 20px 0 grey;

値を大きくするにつれて影がぼやけていきます(負の値は使えない)。

広がり

広がりを変更するとこのようになります。

box-shadow:10px 10px 0 -5px grey;

box-shadow:10px 10px 0 5px grey;

box-shadow:10px 10px 0 10px grey;

値を大きくするにつれて影が大きくなっていきます。

好きな色を指定することができます。

box-shadow:10px 10px 10px 3px #b0c4de;

複数の影を作る

値をカンマ(,)で区切ることで、複数の影を作ることが可能です。

box-shadow:10px 10px 10px 3px #b0c4de,
-10px -10px 10px 3px #ff4500;

影を内側にセットする

最後にinsetを付けることで、影を要素の内部にセットすることが可能です。insetは影ごとにon/offが可能です。

box-shadow:10px 10px 10px 3px #b0c4de inset,
-10px -10px 10px 3px #ff4500 inset;

見ての通り、box-shadowのある位置が枠の背景色となってくり抜かれ、box-shadowの外側から背景色に向けて色が伸びる形になります。

この白抜きになってるところに
box-shadowがあります

box-shadowの使い方は以上です。

CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント