【CSS】紙がふんわりと浮かんだようなデザインをCSSで作る方法

過去に一度だけ実務の中で構築した、「紙がふんわりと浮かんだようなデザイン」をCSSを使って作る方法をまとめました。

実案件のデザインによって細部の調整を適宜おこなってください。

ベースとなるHTMLは下記になります。

<div class="paper">
  <p>紙がふんわりと浮かんだようなデザイン</p>
</div>

紙全体がふんわりと浮かんだようなデザイン（均等）

.paper {
  width: 800px;
  height: 200px;
  margin: 0 auto;
  /* box-shadow: 横方向 縦方向 ぼかし 広がり 影色 */
  /* 広がりをマイナスにすると、浮いた感じになる */
  box-shadow: 0 10px 6px -6px #777;
  background: #f5f5f5;
}

紙の両側がふんわりと浮かんだようなデザイン

.paper {
  position: relative;
  width: 800px;
  height: 200px;
  margin: 0 auto;
  background: #f5f5f5;
}

.paper:before,
.paper:after {
  position: absolute;
  bottom: 15px;
  z-index: -1;
  width: 300px;
  height: 25px;
  /* box-shadow: 横方向 縦方向 ぼかし 影色 */
  box-shadow: 0 15px 10px #777;
  background: #777;
  content: '';
}

.paper:before {
  left: 10px;
  transform: rotate(-3deg);
}

.paper:after {
  right: 10px;
  transform: rotate(3deg);
}

紙の左側がふんわりと浮かんだようなデザイン

.paper {
  position: relative;
  width: 800px;
  height: 200px;
  margin: 0 auto;
  background: #f5f5f5;
}

.paper:before {
  position: absolute;
  bottom: 15px;
  left: 10px;
  z-index: -1;
  width: 300px;
  height: 25px;
  /* box-shadow: 横方向 縦方向 ぼかし 影色 */
  box-shadow: 0 15px 10px #777;
  background: #777;
  transform: rotate(-3deg);
  content: '';
}

紙の右側がふんわりと浮かんだようなデザイン

.paper {
  position: relative;
  width: 800px;
  height: 200px;
  margin: 0 auto;
  background: #f5f5f5;
}

.paper:before {
  position: absolute;
  bottom: 15px;
  right: 10px;
  z-index: -1;
  width: 300px;
  height: 25px;
  /* box-shadow: 横方向 縦方向 ぼかし 影色 */
  box-shadow: 0 15px 10px #777;
  background: #777;
  transform: rotate(3deg);
  content: '';
}