CSSで画像に本のようなシャドウと光沢をつける

CSSで影をつけるためのbox-shadowプロパティを擬似要素に対しても指定することで、まるで本のような立体感を実現できます。

これはZennの本でも使っている表現です。

HTML

登場する要素は、（1）画像と（2）画像を囲む親要素です。

<div class="book-cover">
  <img src="~" class="book-cover-image" />
</div>

👆book-coverクラスにはdivタグを使っていますが、pタグなどでもOKです。

なぜ２つの要素が必要なのか

本来はimgタグだけで本らしい立体感を出したいのですが、本のカバーらしい光沢感を出すためには画像の上に覆いかぶさるように透明のグラデーションを重ねる必要があります。
この画像の上に覆いかぶさるグラデーションは、疑似要素（ここではafter）により実現します。

CSS

/* 画像を囲む要素 */
.book-cover {
  width: 180px; /* 本の幅 */
  position: relative;
  box-shadow: 10px 15px 22px -5px rgba(0, 0, 0, 0.2),
    0 0 2px rgba(0, 0, 0, 0.15); /* 周囲の影 */
  border-radius: 4px; /* 角丸にすると本らしさが出る */
}

/* 疑似要素で光沢演出のためのカバーを画像に重ねる */
.book-cover:after {    
  content: '';
  position: absolute; /* 親要素に重なるように */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 👇白の透明度を調整したグラデーション */
  background: linear-gradient(
    -90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 80%,
    rgba(255, 255, 255, 0.4) 94%,
    rgba(255, 255, 255, 0.5) 96%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* 画像 */
.book-cover-image {
  display: block;
  width: 100%; /* 親要素の幅に合うように */
  border-radius: 4px; /* 親要素に対してoverflowを使うとバグるブラウザがあるので、画像自体にもborder-radiusを適用する */
}

光沢演出のためのグラデーションは、白の透明度を調整しただけのものです。

• 左端の直前で急激に白を濃くすることで、縦の光沢ラインを表現
• 左端を透明にすることで、背表紙らしい丸みを表現

以上のCSSで本らしい立体感を演出できます。あまり使う機会は多くないかもしれませんが参考までに。