要素の内側・外側に「影」を付けることができる、box-shadowのご紹介です。
box-shadowの使い方
「影」というとわかりづらいですが、要素に寄り添う別の形を作る機能が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;
-10px -10px 10px 3px #ff4500;
影を内側にセットする
最後にinsetを付けることで、影を要素の内部にセットすることが可能です。insetは影ごとにon/offが可能です。
box-shadow:10px 10px 10px 3px #b0c4de inset,
-10px -10px 10px 3px #ff4500 inset;
-10px -10px 10px 3px #ff4500 inset;
見ての通り、box-shadowのある位置が枠の背景色となってくり抜かれ、box-shadowの外側から背景色に向けて色が伸びる形になります。
この白抜きになってるところに
box-shadowがあります
box-shadowがあります
box-shadowの使い方は以上です。
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。
ちょっととっても数少ないですが、段々増える予定です。
sunagitsune.com
2019.01.27
コメント