パーツ番号 10-01-05 ・ CSSのみ

在庫/セールバッジ

「残りわずか」が点滅し、「NEW」「SOLD OUT」「人気」など各種バッジを商品サムネに重ねます。WooCommerceの在庫状況表示に流用できます。

ecautocss

プレビュー

ソースコード

HTML

<div class="d10-01-05-grid">
          <div class="d10-01-05-cell"><div class="d10-01-05-thumb">🧴</div><span class="d10-01-05-badge d10-01-05-low">残りわずか</span></div>
          <div class="d10-01-05-cell"><div class="d10-01-05-thumb">🕯️</div><span class="d10-01-05-badge d10-01-05-new">NEW</span></div>
          <div class="d10-01-05-cell"><div class="d10-01-05-thumb d10-01-05-gray">📦</div><span class="d10-01-05-badge d10-01-05-sold">SOLD OUT</span></div>
          <div class="d10-01-05-cell"><div class="d10-01-05-thumb">🎁</div><span class="d10-01-05-badge d10-01-05-hot">人気</span></div>
        </div>

CSS

.d10-01-05{background:#f6f7fb}
        .d10-01-05-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
        .d10-01-05-cell{position:relative;width:92px;height:92px}
        .d10-01-05-thumb{width:100%;height:100%;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:40px;background:linear-gradient(135deg,#e0e7ff,#f3e8ff);box-shadow:0 4px 14px rgba(30,40,80,.08)}
        .d10-01-05-thumb.d10-01-05-gray{filter:grayscale(1);opacity:.55}
        .d10-01-05-badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;color:#fff;border-radius:6px;padding:3px 7px}
        .d10-01-05-low{background:#f97316;animation:d215blink 1s steps(1) infinite}
        @keyframes d215blink{50%{opacity:.35}}
        .d10-01-05-new{background:#10b981}
        .d10-01-05-sold{background:#64748b;top:50%;left:50%;transform:translate(-50%,-50%)}
        .d10-01-05-hot{background:#ef4444}

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