CSSで写真画像に影を利用した装飾を付ける方法

本記事では、CSSを使って写真画像に影を付ける方法を解説します。以下の2つの見出しで、それぞれ異なる影の付け方を紹介します。

画像の背景に影をつける

この方法では、画像の背景に影をつけます。以下のCSSを使用します。

.img-shadow {
  box-shadow: 15px 15px 0 #ccc;
}

HTMLでは、対象の画像にimg-shadowクラスを指定します。例えば次のようになります。

<img src="your-image.jpg" alt="サンプル画像" class="img-shadow">

画像の背景につけた影を斜線にする

この方法では、画像の背景に斜線の影をつけます。以下のCSSを使用します。

.box-shadow-diagonal {
  position: relative;
}

.box-shadow-diagonal img {
  position: relative;
  z-index: 2;
}

.box-shadow-diagonal::before {
  background-image: repeating-linear-gradient(-45deg, #ccc 0px, #ccc 2px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%);
  background-size: 10px 10px;
  content: '';
  position: absolute;
  bottom: -15px;
  right: -15px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

HTMLでは、対象の画像をbox-shadow-diagonalクラスのdivで囲みます。例えば次のようになります。

<div class="box-shadow-diagonal">
  <img src="your-image.jpg" alt="サンプル画像">
</div>

これで、画像に影を利用した装飾ができます。デザインに合わせて、色や大きさ、形状などを自由にカスタマイズしてみてください。