box-shadow - CSS
影をつけることができる。
あと、図形を複製することもできる
box-shadow: offset-x, offset-y, (blur-radius), (spred-radius), (color), (inset);
offset-x: 左右の影offset-y: 上下の影blur-radius: ぼかし具合spred-radius: 影の広さcolor: 影の色inset: 内側に影を表示する
普通の影(offset-x, offset-y)
offset-xとoffset-yだけ指定すると、黒色の影ができる
box-shadow: 5px 5px;
See the Pen 右、下に影 by tamago (@tamago324) on CodePen.
負の数を指定するとそれぞれ 左方向 と 上方向 に影ができる
box-shadow: -5px -5px;
See the Pen 左、上に影 by tamago (@tamago324) on CodePen.
影の色を変える(color)
第３引数以降にcolorを指定するだけで影の色を変えられる
box-shadow: 5px 5px green;
こんな感じ
See the Pen 影の色を変える by tamago (@tamago324) on CodePen.
影をぼかす(blur-radius)
第３引数にpxやemなどの大きさを指定すると、影をぼかすことができる。負の数は指定することはできない
20pxぼかしてみた
box-shadow: 5px 5px 20px;
See the Pen 影をぼかす by tamago (@tamago324) on CodePen.
左上が通常時、右下がぼかしたときとなっている。
上下左右対称に影をつける
offset-xとoffset-yに0を指定すると、上下左右に影ができる
これは、どこに影を作ったらいいかわからなくてボヤーッとする感じ？
box-shadow: 0 0 10px;
See the Pen 上下左右対称に影 by tamago (@tamago324) on CodePen.
どの部分が10pxなの！？わかんない
影を広げる(spred-radius)
spred-radiusで影の縮小、拡大ができる。
影の拡大は正の数を指定する
box-shadow: 5px 5px 0 5px;
使い道がよくわからない...影を広くしたいときとか？ぼかしも使うといいのかも
See the Pen 影を広げる by tamago (@tamago324) on CodePen.
影を内側に表示(inset)
insetを使うことで内側に影を作る
insetを使うことで内側に影を表示することができる。
box-shadow 0 0 0 5px inset;
実際に使って実装してみた例
しましま模様もできるから面白い！！
ボタンをへこませるように見せるとかもできるのかな？？？
box-shadow | CSS-Tricks このサイトが面白いと思った
図形を複製する
複数影を指定できることを利用して、図形を複製することもできる
.content { /* 複製 */ box-shadow: 0px 60px rgba(255, 0, 0, 0.8), 30px 30px rgba(0, 0, 255, 0.8), -30px 30px rgba(60, 100, 200, 0.8); }
See the Pen 図形を複製する by tamago (@tamago324) on CodePen.
