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

複数トースト積み重なり表示

複数の通知が奥から手前へ重なって見える静止トーストスタック。連続した通知が発生した際のUI状態確認に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="stack09-14-06">
          <div class="s09-14-06 back2">続報を表示中です</div>
          <div class="s09-14-06 back1">下書きを保存しました</div>
          <div class="s09-14-06 front1">アップロードが完了しました</div>
        </div>

CSS

.d09-14-06{
          background:#f8fafc;
        }
        .d09-14-06 .stack09-14-06{
          position:absolute;
          left:50%;
          bottom:18px;
          transform:translateX(-50%);
          width:220px;
        }
        .d09-14-06 .s09-14-06{
          position:absolute;
          left:0;
          right:0;
          bottom:0;
          padding:11px 16px;
          border-radius:8px;
          font-family:sans-serif;
          font-size:12px;
          color:#fff;
          text-align:center;
          white-space:nowrap;
          box-shadow:0 8px 16px rgba(15,23,42,.2);
        }
        .d09-14-06 .back2{
          bottom:16px;
          background:#94a3b8;
          transform:scale(.92);
        }
        .d09-14-06 .back1{
          bottom:8px;
          background:#64748b;
          transform:scale(.96);
        }
        .d09-14-06 .front1{
          bottom:0;
          background:#1e293b;
        }

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