CSSでボックスに影を付けると言えば？
そそ、box-shadow です。
box-shadow
box-shadowはよく使っていると思いますので
さらっとおさらい。
さらっとおさらい。
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5) って感じで書きます。
左から順に X軸 Y軸 ブラー半径 スレッド半径 影の色 となります。
「X軸」「Y軸」＝ 数値で右へ下へとずれます。
マイナスにする事で左や上にずらす事ができます。
「ブラー半径」＝ ぼかしの量の事です。
「スレッド半径」＝ 影のボックス自体の拡大縮小。
「影の色」は #000でも良いですが、rgba(0, 0, 0, 0.5)とする事でalpha値を使えるので透明度が調整できます。
内側に影を付けたい時は最後に inset と付け足してください。
css
.basic1 {
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.5);
}
.basic2 {
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.5) inset;
}
basic1
basic2
drop-shadow
box-shadow と大きな違いはないです。
記述方法は少し違いますが…
むしろ、影をつけるだけなら box-shadow で十分。
じゃ、いらねーじゃん？
記述方法は少し違いますが…
むしろ、影をつけるだけなら box-shadow で十分。
じゃ、いらねーじゃん？
ところが、擬似要素を使うと、親要素と擬似要素とそれぞれに影を付ける必要がありますが、
drop-shadow だと一発！
擬似要素ってのは ::before ::after とかのやつですね。
四角に三角を付けて吹き出しにしたり、自動で『』がつくようにしたりするやつです。
最近だとSVG画像を使った場合です。
SVG画像に box-shadow の場合、周りに四角い影が付きますが、
drop-shadow だとちゃんとSVG画像に合わせた影が付くのです。
さっそく見てみましょう！
まずは疑似要素（吹き出しバージョン）
css
.basic3 {
box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
}
.basic4 {
filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}
basic3
basic4
疑似要素で後付した三角の部分にも影が付いてますね！
次はSVG画像です。
CSSで img に付けてください。
css
.basic5 img {
box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
}
.basic6 img {
filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}
ね？
SVG画像にも綺麗に影がついたでしょ？
