CSS box-shadowで下向きの影を実装する方法

CSSでボックスの下にのみ影をつける方法

CSSの box-shadow プロパティを使って、ボックスの下にのみ影をつける方法はいくつかあります。 以下では、代表的な3つの方法を紹介します。

方法1: 単一の box-shadow プロパティを使用する

この方法は、box-shadow プロパティに2つの値を指定することで、影の水平方向と垂直方向のオフセットを設定します。 影を下だけに表示するには、垂直方向のオフセットに正の値を指定します。

.box {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

上記コードでは、ボックスの下に5pxの影を表示します。 0 は影の水平方向のオフセットを表し、影を左側に5pxずらすことを意味します。 2番目の 5px は影の垂直方向のオフセットを表し、影を下側に5pxずらすことを意味します。 最後の rgba(0, 0, 0, 0.2) は影の色と透明度を表します。

この方法は、複数の box-shadow プロパティを組み合わせることで、より複雑な影を作成することができます。 例えば、下と右に影を表示するには、以下のようにコードを記述します。

.box {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 5px 0 5px rgba(0, 0, 0, 0.2);
}

上記コードでは、最初の box-shadow プロパティは下方向に影を、2番目の box-shadow プロパティは右方向に影を表示します。

この方法は、inset キーワードを使用して、ボックスの内側に影を表示することができます。 下方向にのみ影を表示するには、以下のようにコードを記述します。

.box {
  box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.2);
}

上記コードでは、ボックスの下側に内側の影を表示します。

その他のオプション

上記の3つの方法に加えて、box-shadow プロパティには他にも様々なオプションがあります。 例えば、影のぼかしや拡散を設定することもできます。 詳細については、以下のリソースを参照してください。

CSSでボックスの下にのみ影をつける方法はいくつかあります。 上記の解説を参考に、目的に合った方法を選択してください。

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 5px 0 5px rgba(0, 0, 0, 0.2);
}

方法3: inset キーワードを使用する

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.2);
}

実行結果

上記コードを実行すると、以下の結果が表示されます。

方法1

補足

上記のサンプルコードは基本的な例です。 影の色、ぼかし、拡散などの設定を変更することで、様々なバリエーションを作成することができます。

CSSでボックスの下にのみ影をつけるその他の方法

方法4: border-bottom プロパティを使用する

border-bottom プロパティを使用して、ボックスの下部にのみ境界線を設定することができます。 境界線のスタイルを solid に設定し、影の色と一致する色を選択することで、影のような効果を作成することができます。

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  border-bottom: 5px solid rgba(0, 0, 0, 0.2);
}

linear-gradient プロパティを使用して、ボックスの下部にのみグラデーションを適用することができます。 グラデーションの開始色を影の色、終了色を透明色にすることで、影のような効果を作成することができます。

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent);
}

方法6: ::after 疑似要素を使用する

::after 疑似要素を使用して、ボックスの下部に影を模倣する要素を追加することができます。 疑似要素の背景色を影の色に設定し、position: absolute を使用してボックスの下部に配置することで、影のような効果を作成することができます。

.box {
  width: 100px;
  height: 100px;
  position: relative;
}

.box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(0, 0, 0, 0.2);
}

それぞれの方法のメリットとデメリット

各方法にはそれぞれメリットとデメリットがあります。 以下に、それぞれの方法の概要とメリットとデメリットをまとめます。