パーツ番号 09-07-12 ・ CSSのみ

重なりカード風スタック通知(静止)

背後にもう1枚カードが重なって見える奥行き表現の静止通知。複数件の通知が届いた状態の見た目確認に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="stack09-07-12">
          <div class="n09-07-12 n09-07-12-c">
            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M8 12l2.5 2.5L16 9"></path></svg>
            <span>注文が確定しました</span>
          </div>
          <div class="n09-07-12 n09-07-12-b">
            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M8 12l2.5 2.5L16 9"></path></svg>
            <span>入金を確認しました</span>
          </div>
        </div>

CSS

.d09-07-12 .stack09-07-12{
          position:relative;
          width:100%;
          max-width:260px;
          padding-top:8px;
        }
        .d09-07-12 .n09-07-12{
          display:flex;
          align-items:center;
          gap:10px;
          padding:13px 16px;
          border-radius:10px;
          font-family:sans-serif;
          font-size:12.5px;
          color:#fff;
        }
        .d09-07-12 .n09-07-12 svg{
          width:16px;
          height:16px;
          flex-shrink:0;
        }
        .d09-07-12 .n09-07-12-b{
          position:absolute;
          top:0;
          left:10px;
          right:-10px;
          background:#94a3b8;
          z-index:1;
          opacity:.7;
        }
        .d09-07-12 .n09-07-12-c{
          position:relative;
          background:#16a34a;
          z-index:2;
        }

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