【初心者でもわかる】cssだけで、徐々に透明にしていく方法

どうも7noteです。徐々に透過して透明になっていく要素の作り方について

グラデーションを使って、画像やテキストなどの要素を徐々に透明になっていくように見せる方法。

↓↓↓↓↓↓

こんな感じに徐々に透明にできます。

徐々に透明になる要素の書き方

index.html

<div class="transparent">
  <img src="sample.jpg">
</div>

style.css

.transparent {
  position: relative;  /* 基準位置とする */
}
.transparent::before {
  content: "";         /* 疑似要素に必須 */
  width: 100%;         /* 幅いっぱい */
  height: 100%;        /* 高さいっぱい */
  display: block;      /* 高さを指定するためにブロック要素にする */
  background: linear-gradient(rgba(255,255,255,0) 0, #fff 80%); /* 徐々に透明にする */
  position: absolute;  /*  */
  top: 0;
  left: 0;
}

解説

徐々に透明にするためには、画像要素を本当に透明にするのではなく、背景色と同じグラデーションを上にかぶせることで透明になっているように見せかけています。

疑似要素でposition指定をしたbeforeに対して、白→透明のグラデーションをかけます。
そしてブロック要素にして画像の高さと幅とおなじになるようそれぞれ100%を指定して位置を指定すれば、徐々に透明になっている要素の完成です。

backgroundのカラー（#fff）を100%にしていないのは、100%にしてしまうと画像の縁がはっきり見えてしまうからです。

まとめ

CSSでできることは限られているので、どうやって錯覚にかけてそれっぽく見せるかが重要だと思っています。
もちろんぐちゃぐちゃなソースはアレかもしれないですが、最終的に動いて思った通りに見えているのであれば、手段はなんでもいいのかなと思います。

おそまつ！

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