box-shadowは要素に影を付けるCSS
影を付けるプロパティには、box-shadow、text-shadow、drop-shadowの3つがあります。
このうちbox-shadowはボックス要素、text-shadowはテキストの文字、drop-shadowは画像などに使用されます。なかでも、ボックス要素全般に使えるbox-shadowは、比較的、使用頻度が高いCSSになります。
■box-shadowの例
box-shadowは、最低でも2個（水平、垂直）のパラメータが必須で、ぼかしや色など最大5個まで指定することができます。
.sample {box-shadow: 水平 垂直 ぼかし 影の広がり 色彩;}
1個目「水平」: 左右の長さ（必須）
2個目「垂直」: 上下の長さ（必須）
3個目「ぼかし」: 影のぼかし具合（オプション）
4個目「影の広がり」: 影の拡大、長さ（オプション）
5個目「色彩」: rgbaなどで影の色を指定（オプション）
例えば、以下の場合、水平方向に20px、垂直方向に10px、ぼかしが5px、影の広がりが0pxで、色が黒（透過率0.4）の意味になります。
.sample {box-shadow: 20px 10px 5px 0 rgba(0, 0, 0, 0.4);}■text-shadowの例
text-shadowは、最低でも2個（水平、垂直）のパラメータが必須で、最大4個まで指定することができます。
.sample2 {text-shadow: 水平 垂直 ぼかし 色彩;}
例えば、<p>タグなどで以下のように指定すると、テキストに影を付けることができます。
.sample2 {text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4);}例：テキストにtext-shadowを適用
■drop-shadowの例
drop-shadowは最低でも2個（水平、垂直）のパラメータが必須で、最大4個まで指定することができます。
img.sample3 {filter: drop-shadow(水平 垂直 ぼかし 色彩);}
例えば、<img class="sample3"の画像に影を付けると以下のようになります。
img.sample3 {filter: drop-shadow(9px 9px 9px rgba(0, 0, 0, 0.4));}
ただし、影を付けると立体感が出るため、多用すると圧迫感が出てきます。そのため、薄い灰色に透過やぼかしも設定し、自然な形の陰影を付けるとよいでしょう。
box-shadowは最低でも水平、垂直の2個のパラメータが必要
box-shadowプロパティには、以下のように、最低でも「水平、垂直」の2個のパラメータの値を指定しないと表示されません。
box-shadow: 0 0;■1個目: 水平（横）方向の影
1個目の箇所は、影の左右の長さを指定します。正の値は右方向へ伸び、負の値の場合は左方向へ伸びます。
box-shadow: 10px 0;ちなみに、パラメータの値を300pxにした場合、以下のようになります。
box-shadow: 300px 0;■2個目: 垂直（縦）方向の影
この箇所は影の上下の長さを指定します。正の値は下方向へ伸び、負の値は上方向へ伸びます。
box-shadow: 0 10px;上記の水平、垂直の2つを合わせた場合、以下のようになります。
box-shadow: 10px 10px;ここまでの2個の値は必須ですが、他にもぼかし、影の広がり、色彩の値も設定することができ、以下のように最大5個まで指定することができます。
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);影の色は5個目の値で指定できますが、最初の2個しか指定しなかった場合、ブラウザのデフォルトにもよりますが、概ね黒で表示されます。
■3個目: エッジのぼかし
こちらは、影をどの程度ぼかすかを設定します。マイナスの値にはならず、0以上を指定しますが、0の場合はぼかされずに明瞭に表示されます。
例えば、ぼかしを10pxにした場合、以下のようになります。
box-shadow: 0 0 10px;また、上記の水平、垂直の指定も合わせると以下のようになります。
box-shadow: 10px 10px 10px;この3個目について、W3Cによると「正確なアルゴリズムは定義されていません。」とのことで、計算方法の詳細は不明です。
■4個目: 影の広がり
影の広がりは、4個目の値で設定することができます。3個目はぼかしの効果がありますが、4個目にはぼかし効果はなく、単に影の広がりが拡大して長くなります。また、負の値を指定した場合には影が縮小します。
以下のコードは、影の広がりを10pxに設定したものです。
box-shadow: 0 0 0 10px rgba(0, 0, 0, 1);また、上記の3つも合わせますと、以下のようになります。
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 1);この場合、影の広がりが拡大して大きくなっています。
■5個目: 色彩の指定
5個目の値にて、影の色彩を指定できます。4個までしか指定しない場合は黒ですが、任意の色を指定することができます。単純に、#cccなどでも指定できますが、rgbaで透過も設定しておくとよいでしょう。
以下は、黒にて透過率0.4で指定したものです。
box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.4);このrgba(0,0,0,0.4)は、40%の透明度を持つ黒色を意味しますが、透過のため、その下にある背景色と混ざります。その結果、背後の色が透けて見えるため、サイト全体の色彩との統一感を保つことができます。
また、青色にすると以下のようになります。
box-shadow: 10px 10px 10px 0 rgba(29, 155, 240, 0.4);■影を重ねる方法
上記のbox-shadowについては、カンマで区切って影を重ねることができます。以下のように記載した場合、「影A」は「影B」の上に重なりますが、最初に記載した方が上に表示されます。
box-shadow: 影A, 影B;
例えば、以下のようにすると、影を重ねることでより複雑な立体感を表現することができます。
box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.4),10px 10px 10px 0 rgba(29, 155, 240, 0.4);けれども、単に重ねただけですと、不自然な形に仕上がってしまうため、必要に応じてシンプルに一つの影だけを設定することもあります。
■borderとの関連
4個目のパラメータにはぼかしの効果はないため、値を1pxにすると以下のようにborderのようにも見えます。
box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);けれども、borderは特定の辺だけに線を追加できますが、box-shadowにはできない違いがあります。
また、borderは幅や高さにカウントされるものの、box-shadowは幅や高さには影響を与えません。そのため、両方を同時に設定すると、以下のようにborderの外側にbox-shadowが表示されることになります。
border:10px solid #ccc;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);加えて、border-radiusを設定している場合、box-shadowはそれに影響されて丸みを帯びます。
border-radius: 20px;
box-shadow: 10px 10px 10px 0 rgba(29, 155, 240, 0.4);最終的に、オーソドックスなbox-shadowの指定方法は、以下のような形になると思います。
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);色は黒の透過で灰色を基調とし、3個目のぼかしの値を大きめに設定することでより自然な形で色を拡散させます。この場合は垂直方向に1pxずらしてはいますが、ズレの値を0でぴったりと合致させ、ぼかし効果を大きめにすると四方に影を付けることができます。
その状態から、水平、垂直方向に徐々にずらして調整することをおすすめします。当サイト運営者の場合、4個目のパラメータはあえて使用していませんが、お好みで設定するとよいでしょう。