box-shadowジェネレーター
要素に影を落とすためのbox-shadowを確認するためのジェネレーターです。
各種プロパティなどページ下部に詳しい説明を書いてあります。
filter関数のdrop-shadowやReact Nativeのshadowのジェネレーターは別ページになります。
/* preview */
width: 200px;
height: 60px;
background-color: #3cb371;
/* border-radius */
border-radius: 30px;
/* box-shadow */
box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);box-shadowのプロパティについて
基本的な設定
box-shadow: 左右の位置 上下の位置 色;
box-shadow: 0px 1px #000;まず基本的な設定としては、左から何px / 上から何px / 色を指定してください。
左右および上下に関してはマイナスの数値を指定することもできます。
また要素自体に対して影を落とすので、background-colorがtransparentであっても影を設定することができます。
ぼかしの設定
box-shadow: 左右の位置 上下の位置 ぼかし 色;
box-shadow: 0px 1px 6px #000;ぼかし(blur)も設定することができます。
なおぼかしについてはマイナスの数値は指定することはできません。
広がりの設定
box-shadow: 左右の位置 上下の位置 ぼかし 広がり 色;
box-shadow: 0px 1px 6px 3px #000;ぼかしの後に数値を入力することで広がり(spread)も設定することができます。
広がりはマイナスの数値を指定することができます。
影の位置の設定
box-shadow: 左右の位置 上下の位置 ぼかし 広がり 色 inset;
box-shadow: 0px 1px 6px 3px #000 inset;insetを記述することで影の位置を設定することができます。
指定しない場合は外側に、指定した場合は影が内側に設定されます。
影を複数設定
box-shadow: 左右の位置 上下の位置 ぼかし 広がり 色 inset, 左右の位置 上下の位置 ぼかし 広がり 色 inset;
box-shadow: 0px 1px 6px 3px #000, 0px -1px 6px 3px #f00;カンマで区切ることで複数の影を設定することができます。
まとめ
box-shadow: 左右の位置 上下の位置 ぼかし 広がり 色 inset, ...;左右の位置や上下の位置、どれくらい影をぼかすか、また影をどれくらい広げるか縮めるか、内側に影を設定するかなどができます。
AD
