【ライブチャット風UI】見切れた部分を”疑似”透過ではなく本当に透過させたい

記事の概要説明ドラゴン

お疲れ様です。突然ですがみなさんはこういうUIを実装した経験がありますか？

はい、見切れた部分を透過させるやつです。

↑に添付した例では、「Fake Opacity = 背景色と同じ色の線形グラデーションを被せて疑似的に透過してるように見せる手法」を使っています。

※Fake Opacityという呼称が一般的かどうかは分かりません😁

これ無地背景にしか対応できなくないか？？？？？？？

このままだと、ライブチャットのような背景画像のあるUI上で好きな総菜を発表することができません。何とかしなければ。

という記事です。

どういうこと？

A. こういうことです

できた実装発表ドラゴン

Dragon.vue

<script setup lang="ts">
const list = [
  "からあげ",
  "ハンバーグ",
  "（中略）",
  "ごぼうとにんじん炒めたやつ",
  "きんぴらごぼう",
];
</script>

<template>
  <div class="flex flex-col gap-y-2 items-center">
    <p class="text-xl font-semibold text-center mb-4">好きな総菜発表リスト（画像背景）</p>
    <div class="w-96 h-[667px]">
      <div class="chat-wrapper_bg px-2 rounded-2xl">
        <ul class="chat-list">
          <li v-for="item in list" class="chat chat-start">
            <div class="chat-image avatar">
              <div class="w-10 rounded-full bg-gray-400" />
            </div>
            <div class="chat-bubble">{{ item }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chat-wrapper_bg {
  width: 100%;
  height: 100%;
  background: no-repeat url("/img/bg_sky.png");
  background-size: cover;
}
.chat-list {
  width: 100%;
  height: 667px;
  overflow-y: auto;
  /* 見切れ部分のマスク */
  mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-size: 100%;
  mask-position: 0 0, 100% 0;
  mask-repeat: no-repeat, no-repeat;
}
</style>

今回の実装に関係ないスタイルはすべてtailwindとdaisyUIに切り出しているので、styleタグ内で定義されているクラスだけ注目していただければOKです🥰

maskを使って、チャットリスト部分に透過レイヤーを当てているイメージです！
これによってマスクされた部分が透過グラデーションに合わせてくり抜かれるので、疑似ではなくほんとうに要素自体が透過されてる状態にできます

これでいつでも好きな総菜を発表することができそうです

ちなみに

今回はmask-positionを数値で設定している影響なのかショートハンドだとうまく動かなかったんですが、本来はmaskプロパティで一括指定が可能です

また以前はベンダープレフィックスが必要だったみたいですが、2024/04現在ではIE以外は対応しているので、特に気にしなくてもよさそうです🐣

参考文献

※実装の参考文献というより、maskのhow toがとても分かりやすくまとまっているページです

（おまけ）元ネタ