CSSで要素ボックス、画像に影をつける方法｜box-window・drop-shadowの使い方

困ってる人

CSSで要素に影をつけて表示したいんだけど、どうやればいいのかが分からない

CSSで影をつける場合には、box-shadowと、drop-shadowが便利ですよ
今回は、それらの違いと使い方について簡単に案内しますね

オペレーター

こんにちは、ヨロと申します。

今回はいろいろな要素、ボックスに影をつけて表示する方法という事で、例えばこんな感じ、

↓

CSSを使えばたったの１行でとても簡単。

CSSで要素ボックス、画像に影をつける方法｜box-window・drop-shadowの使い方

要素に影をつける場合は、box-shadowと、drop-shadowが便利、

それぞれの違いを簡単にいうと、

単なる四角形なら、box-shadowでもOK、

ただ、特殊な図形や文字ロゴなどに影を着けたい場合は、

「drop-shadow」が便利。

drop-shadowなら透過PNG画像や、SVG画像なんかにも使える。

注意点としては、JPG画像には効かないという点。

使い方は、box-shadowも、drop-shadowも大体は同じ、

box-window, drop-shadowの基本的な書き方

基本的なbox-shadowの使い方、書き方としては、

box-shadow: 4px 4px 8px 1px rgba(0,0,0, 0.4); こんな感じ。

box-shadow: 〇px(縦方向の影の位置) 〇px(横方向の影の位置) 〇px(ボケ具合、滲み具合) 3px(影の範囲) rgba(0,0,0,0.4(色の濃さ));

box-windowの書き方（例：右下に影）

box-shadow: 4px 4px 8px 1px rgba(0,0,0, 0.4);

そうすると、右下に影がつく。

値を書く際に例えば、

box-shadow: -4px -4px 8px 1px rgba(0,0,0, 0.4);

と書く事によって、左上に影がつける事が出来る。

()の後に、insetをつける事によって、要素の内側に影をつける事が出来る。

//()の後にinset

box-shadow: 4px 4px 8px 1px rgba(0,0,0, 0.4) inset;

drop-shadowの書き方（例）

次に、drop-shadowの書き方は、

filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.8)); こんな感じ。

filter: drop-shadow(〇px(縦方向の影の位置) 〇px(縦方向の影の位置) 〇px(ボケ具合、滲み具合) 色);

値を大幅にずらすとこんな感じ、

filter: drop-shadow(15px 15px 2px rgba(0,0,0,0.6));

rgbaを使わず、こういう指定の仕方もあり、

filter: drop-shadow(15px 15px 2px red);

注意点としては、

box-shadowと、drop-shadowでは、同じ値を指定したとしても影の付き方が違うという点。

そこは少しずつ触りながら、調節をしつつ覚えていくといいかも。

終わり。