CSSで影をつける場合には、box-shadowと、drop-shadowが便利ですよ
今回は、それらの違いと使い方について簡単に案内しますね
こんにちは、ikuxxと申します。
今回はいろいろな要素、ボックスに影をつけて表示する方法という事で、例えばこんな感じ、
↓
CSSを使えばたったの1行でとても簡単。
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の使い方、書き方としては、
1 2 3 4 5 |
// 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の書き方(例)
1 |
box-shadow: 4px 4px 8px 1px rgba(0,0,0, 0.4); |
そうすると、右下に影がつく。
値を書く際に例えば、
1 |
box-shadow: -4px -4px 8px 1px rgba(0,0,0, 0.4); |
と書く事によって、左上に影がつける事が出来る。
()の後に、insetをつける事によって、要素の内側に影をつける事が出来る。
1 |
box-shadow: 4px 4px 8px 1px rgba(0,0,0, 0.4) inset; |
drop-shadowの書き方(例)
次に、drop-shadowの書き方は、
1 2 3 4 5 |
// drop-shadowの書き方 filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.8)); こんな感じ。 filter: drop-shadow(〇px(縦方向の影の位置) 〇px(縦方向の影の位置) 〇px(ボケ具合、滲み具合) 色); |
↓
値を大幅にずらすとこんな感じ、
1 |
filter: drop-shadow(15px 15px 2px rgba(0,0,0,0.6)); |
rgbaを使わず、こういう指定の仕方もあり、
1 |
filter: drop-shadow(15px 15px 2px red); |
注意点としては、
box-shadowと、drop-shadowでは、同じ値を指定したとしても影の付き方が違うという点。
そこは少しずつ触りながら、調節をしつつ覚えていくといいかも。
終わり。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
CSSで要素に影をつけて表示したいんだけど、どうやればいいのかが分からない