box-shadowは実際の業務でもよく使用されるプロパティの1つです。
テキストにはtext-shadow、ボックスにはbox-shadowが用意されていて、box-shadowは画像に対しても影をつける事ができます。(透過pngの透過部分にはかからずボックスに対して影がつきます)
そんなbox-shadowの下だけに影をつける方法を、詳しく解説していきます。
box-shadowで影(ドロップシャドウ)を付ける方法
まずはbox-shadowで影をつける基本的な方法を解説いたします。
例として、全ての方向に影をつけたボックスを用意致しました。
.box {
width: 150px;
height: 150px;
box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);
}box-shadowの値は、
box-shadow: 水平方向 垂直方向 ぼかし 広がり 色;
と指定します。
水平方向にプラスの値で右側に、マイナスの値で左側に影が移動し、垂直方向にプラスの値で下側に、マイナスの値で上側に影が移動します。
色については任意での指定となり、指定が無い場合は黒色となります。
下だけに影(ドロップシャドウ)を設定する方法
次に、先程の基本的なbox-shadowの使い方を応用し、下だけに影を付ける方法を紹介いたします。
box {
box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);
}先ほどのbox-shadowとは違い、影を垂直方向にずらし、ぼかしを大きくし、広がりをマイナスの値にする事でぼかした分の広がり(水平方向への影の漏れ)を抑えています。
広がりのマイナスの値は影の広がりによって違いますので、都度調整してください。
便利なジェネレーターもありますので、そちらで作成して使用するのも良いかと思います。
さいごに
いかがでしたでしょうか。
box-shadowはデザインよってはよく使用しますので、自在に扱えるようになりましょう。
とは言っても、デザインデータで設定されている値を参照して、そのままbox-shadowに当てはめてしまえば簡単です！
