【初心者でもわかる】cssで水面に反射したような鏡面反射を作成する方法

どうも7noteです。鏡面反射の作り方。

水面に反射したように、画像の下に水面に反射したような画像をおいて鏡面反射を作ります。

見本

鏡面反射のソースの書き方

index.html

<div class="image">
  <img src="sample.jpg">
</div>
<!-- ↓反射用↓ -->
<div class="spreflect">
  <img src="sample.jpg">
</div>

style.css

.image {
  margin-bottom: 1px; /* 反射するとこの隙間 */
}

.spreflect {
  transform: scale(1, -1); /* 上下反転 */
  position: relative;  /* 基準位置とする */
}
.spreflect::before {
  content: "";         /* 疑似要素に必須 */
  width: 100%;         /* 幅いっぱい */
  height: 100%;        /* 高さいっぱい */
  display: block;      /* 高さを指定するためにブロック要素にする */
  background: linear-gradient(#fff 30%, rgba(255,255,255,0) 100%); /* 徐々に透明にする */
  position: absolute;  /* 相対位置に指定 */
  top: 0;              /* 上から0pxの位置に指定 */
  left: 0;             /* 左から0pxの位置に指定 */
}

まとめ

同じような方法でbox-reflectというプロパティを使って要素を反転させることができます。

https://shanabrian.com/web/css3/box-reflect.php
※box-reflectを使った場合は「Safari、Chrome」にしか対応できないので注意！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ