JSFiddle - React, Tailwind, and code Playground

by catnose99

HTML

<h1>✍️本のような影を表現</h1>

<div class="book-cover">
  <img...

SCSS

.book-cover {
  position: relative;
  width: 180px; // 本の幅
  box-shadow: 10px 15px 22px -5px rgba(0, 0, 0, 0.2),
    0 0 2px rgba(0, 0, 0, 0.15); // 周囲の影
  border-radius: 4px;
  // 👇疑似要素で光沢と影を表現する
  &: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;
}



// 本の配置を調整するためだけのスタイル
.book-cover {
  margin: 2.5rem auto;
}