こんにちは、よろと申します。

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

↓

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-windowの書き方(例)

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

値を書く際に例えば、

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

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

drop-shadowの書き方(例)

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

↓

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

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

注意点としては、

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

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

終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール