box-shadowプロパティ要素のフレームから影を落とす

box-shadowプロパティ要素のフレームから影を落とす

box-shadowプロパティは要素のフレームの周囲に影(シャドー)を出すことができるプロパティです。

コンマで区切ることで複数の効果を指定することができます。

設定の仕方　Ｘ　Ｙ　dlur　color

影は要素からの相対的なＸ(横方向)とＹ(縦方向)のオフセット、ぼかしの半径、色の順で記述します。

box-shadow: Ｘの値　Ｙの値　ぼかし(blur)　色(color);
box-shadow: 15px 5px 5px red;
これで右方向に15ピクセル、下方向に5ピクセル、ぼかしが5ピクセル分をまとめた分のぼかしで色は赤になります。

ぼかしとは画面上のピクセルをいくつ互いにまとめるかというもの、大きい数字になるとそれだけぼかしが強くなるということ。

下の画像はＸとＹの値をマイナスの数値にしました、負の値になるとＸは左に、Ｙは上に影ができます、ぼかしも大きい数値を入れたので強くなっています。

box-shadowの他の設定の仕方

値の数で解釈が変わる

設定をする値が二つの場合、三つの場合、四つとかで解釈のされ方が違ってきます。

box-shadow: 10px 5px red;　値が二つの場合

値が二つの場合は「Ｘ」と「Ｙ」の値として解釈され、ぼかしは入りません。

box-shadow: 10px 5px 5px red;　値が三つの場合

値が三つの場合は先に書いた通り「Ｘ」「Ｙ」「blur」の値として解釈されます。

box-shadow: 10px 5px 5px 2px red;　値が四つの場合

値が四つの場合は「Ｘ」「Ｙ」「blur」「spread-radius」の値として解釈されます。
「spread-radius」とは正の値が指定された場合は影がその分だけ拡張されて大きくなり、負の数値が指定されたらその分縮小されます。

複数の影を設定する場合

複数の影を指定する時は「,(コンマ)」で区切って指定します。

先に記述した影が先に来て後から指定した影は後ろになります。

ＰＸ(ピクセル)以外のサイズの指定

サイズの指定には「px」「％」「em」「rem」がある

px

サイズを絶対値指定します、pxは画面上にある点のこと、1pxは１ドット、この単位は環境によって変化しない絶対単位です。

％　em

％とemは同じで、サイズを上の親要素を相対値指定するものです、親要素でfont-sizeを16pxと指定したならば、それを基準にして次は上の親要素を基準にしていきます。

rem（root em）

remは％やemのように要素が多くなってくるとどの親要素を基準にしているかが分かりにくくなるのでＣＳＳ３で使えるようになったのが「rem」です。

これは文書のルート要素、一番上の親要素を基準にするものです、一番最初にfont-size: 16px;　で指定した場合はそれが基準になります。

絶対値と相対値

絶対値

他の要素に左右されない値のこと。

相対値

他の要素を参考に数値を決める値のこと、親要素の何%になるか。

box-shadowプロパティ要素のフレームから影を落とす

box-shadowプロパティを使えば影を出すことは簡単に出来てしまいます。

%やｅｍとremの違いや使い方を覚えればＣＳＳの記述もやり易くなると思います。