今回は画像やボックスにbox-shadowプロパティで影(ドロップシャドウ)を付ける方法と、各使用例を紹介・解説していきます。
下だけに影を付ける方法は、box-shadowで影(ドロップシャドウ)を下だけに設定する方法【CSS】をご覧ください。
box-shadowプロパティの使い方
最初に、box-shadowプロパティの基本的な使い方を解説していきます。
使い方は簡単で、影(ドロップシャドウ)を付けたいセレクタに対して以下のように指定します。
box-shadow: 水平方向の位置(x軸) 垂直方向の位置(y軸) ぼかし範囲 広がり範囲 色 内側指定;上記の指定の中で、水平方向の位置(x軸)と垂直方向の位置(y軸)の指定は必須となります。
各値を指定した際の詳しい内容は以下のようになります。
水平方向の位置(x軸)
影の水平方向の位置を指定します。
プラスの値で右側に、マイナスの値で左側に影が伸びます。
垂直方向の位置(y軸)
影の垂直方向の位置を指定します。
プラスの値で下側に、マイナスの値で上側に影が伸びます。
ぼかし範囲
影のぼかし具合を指定します。
値が大きい程ぼかしが大きくなり、指定しないと0となりぼかしはなくなります。
広がり範囲
影の広がりを指定します。
プラスの値で影は大きくなり、マイナスの値で影は小さくなります。
色
影の色を指定します。
色名やRGB、RGBAや他の形式でも指定可能です。
内側指定
「inset」と指定すると影が内側につくようになります。
以上がbox-shadowプロパティの基本的な使い方となります。
次に各値を実際に指定していくつかの使用例(サンプル)を紹介いたします。
ぼかしの無いシンプルな影
div {
box-shadow: 6px 6px;
}水平方向に6px、垂直方向に6pxを指定しています。共にプラス値なのでそれぞれ右側、下側に影が伸びています。
色の指定が無い場合は影の色は黒となります。
影の色を変更
div {
box-shadow: 6px 6px #CCCCCC;
}先ほどの影の色をグレーに変更してみました。影の色を変更する場合は色名やRGBAやRGBAの形式などで指定します。
影をぼかす
div {
box-shadow: 4px 4px 4px;
}ぼかしの値(3つ目の値)を大きくするとぼかしも大きくなります。
色を変えて影をぼかす
div {
box-shadow: 4px 4px 4px gray;
}影の色を変更する場合は色名やRGBAやRGBAの形式などで指定します。
今回は色名で指定してみました。影の位置や色を調整すると、綺麗な影となります。
全方向に影を広げる
div {
box-shadow: 0px 0px 8px rgba(0,0,0,0.25);
}水平方向の位置と垂直方向の位置を0pxにして、ぼかしを入れる事で全方向に影が広がります。
今回は色の指定をRGBAで黒色の透明度を調整しています。
影の広がりを調整する
div {
box-shadow: 4px 4px 4px -2px;
}影の広がりを指定する場合は4つ目の値に指定します。プラスの値で大きく、マイナスの値で影が小さくなります。
水平方向の位置と垂直方向の位置、ぼかしの値で指定した分が、そのまま拡大縮小するイメージです。
今回は、先程解説した影をぼかすの内容を元に影の広がりを縮小してみました。
内側に影を付ける
div {
box-shadow: 4px 4px 4px inset;
}「inset」を指定する事で、内側に影を付ける事ができます。
内側の影の向きを変える
div {
box-shadow: -4px -4px 4px inset;
}先ほどの「inset」の指定に加え、水平方向の位置や垂直方向の位置をマイナスの値で指定すると、それぞれ内側の右側・下側に影を付ける事ができます。
複数の影を付ける
div {
box-shadow: 4px 4px 4px gray inset,4px 4px 4px;
}box-shadowプロパティはカンマ区切りで複数の影を付ける事が可能です。
今回は内側の左側と上側にグレー、外側の右側と下側に黒の影をつけています。
さいごに
いかがでしたでしょうか。
今回はbox-shadowで影(ドロップシャドウ)を付ける方法と使用例を解説していきました。
分かりやすいように黒などの濃い色で影をつけましたが、色やぼかしの調整で綺麗な影を付ける事も可能です。ぜひ色々試してみてください。
