【CSS】要素に影を！「box-shadow」

box-shadowとは

box-shadowは、要素に影を作ることができます。

さらに、box-shadowでは、細かく影を設定することができるほか、簡単にできる点が挙げられます。

ここにサンプルを表示します。

box-shadowで影を出しています。

このように、とても簡単に自然な影を出すことができます。

また、これはぼかし付きの影ですが、ぼかしなしの影もだすことができます。

box-shadowの使い方

◯◯ {
   box-shadow: 右の向きpx  下の向きpx ぼかしpx 広がりpx 色 内側指定;
}

上や左に影を出す場合は、下の指定を-に指定すると上になります。

詳しくは後述します。

ぼかしなしの影

右と下に影を表示させる例はこちらです。

.example {
  box-shadow: 4px 4px;
}

これを適用すると次のようになります。

box-shadowで影を出しています。

上に影を表示させたい場合は-を使用します。

上と下に表示する例

.example {
  box-shadow: -4px -4px;
}

box-shadowで影を出しています。

影の色を変える

初期では影の色が黒になっていますが、色も自由に変更することができます。

背景の色をグレーに変更する例です。

.example {
  box-shadow: 4px 4px gray;
}

box-shadowで影を出しています。

このようになります。

影のぼかし

影をぼかすことで、より自然な影を生成することができます。

影をぼかすには次のように指定します。

.example {
  box-shadow: 4px 4px ぼかしpx gray;
}

ぼかしを4pxに指定した例です。

box-shadowで影を出しています。

また、8pxに指定すると次のようになります。

box-shadowで影を出しています。

より、やわらかな影になります。

影の広がりを調整

影の広がりを調整するには、次のように指定します。

.example {
  box-shadow: 4px 4px ぼかしpx 広がりpx gray;
}

広がりを-5pxにした例です。

box-shadowで影を出しています。

逆に5pxにするとこうなります。

box-shadowで影を出しています。

不思議な感じになりますよね。

内側に影を出す方法

内側に影を出すには次のように指定します。

.example {
  box-shadow: 4px 4px ぼかしpx 広がりpx gray inset;
}

内側に指定した例です。

box-shadowで影を出しています。

このように内側に影が表示されるようになります。

また、カンマ(,)区切りで内側と外側の両方に指定することができます。

.example {
  box-shadow: 4px 4px ぼかしpx 広がりpx gray , 4px 4px ぼかしpx 広がりpx gray inset;
}

内側と外側に影を表示する例です。

box-shadowで影を出しています。
二つの影になっています

また、３つ以上追加して影を重ねるなど、様々な影を表示することができます。

最後に

box-shadowを利用することにより、様々な影を表示させることができます。

前にあるように見せたい時など、様々な場所で利用することができます。