パーツ番号 09-14-10 ・ CSSのみ

アバター付きダークスナックバー

丸アバターと差出人名を添えたダークテーマのスナックバー静止見本。チャットやコメント通知のポップアップ表示確認に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="toast09-14-10">
          <span class="av09-14-10">R</span>
          <div class="body09-14-10">
            <p class="n09-14-10">Rina</p>
            <p class="m09-14-10">コメントを送信しました</p>
          </div>
        </div>

CSS

.d09-14-10{
          background:#f8fafc;
        }
        .d09-14-10 .toast09-14-10{
          position:absolute;
          left:50%;
          bottom:20px;
          transform:translateX(-50%);
          display:flex;
          align-items:center;
          gap:12px;
          padding:10px 18px 10px 10px;
          background:#1e1b2e;
          border-radius:10px;
          font-family:sans-serif;
          white-space:nowrap;
          box-shadow:0 10px 24px rgba(30,27,46,.4);
        }
        .d09-14-10 .av09-14-10{
          flex-shrink:0;
          width:32px;
          height:32px;
          border-radius:50%;
          background:#8b5cf6;
          display:flex;
          align-items:center;
          justify-content:center;
          font-size:13px;
          font-weight:700;
          color:#fff;
        }
        .d09-14-10 .n09-14-10{
          margin:0 0 2px;
          font-size:12px;
          font-weight:700;
          color:#c4b5fd;
        }
        .d09-14-10 .m09-14-10{
          margin:0;
          font-size:12px;
          color:#e2e8f0;
        }

クラス名 .d09-14-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。