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

限定バッジ付きコンテンツサムネイル一覧

「Members Only」ラベルを重ねたサムネイル一覧です。記事一覧ページで会員限定コンテンツと無料コンテンツを区別する表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d10-12-07-grid">
          <div class="d10-12-07-thumb">
            <span class="d10-12-07-tag">Members Only</span>
          </div>
          <div class="d10-12-07-thumb">
            <span class="d10-12-07-tag">Members Only</span>
          </div>
          <div class="d10-12-07-thumb d10-12-07-free">
            <span class="d10-12-07-tagfree">FREE</span>
          </div>
        </div>

CSS

.d10-12-07-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; }
        .d10-12-07-thumb{ position:relative; height:64px; border-radius:8px; background:linear-gradient(135deg,#334155,#0f172a); }
        .d10-12-07-free{ background:linear-gradient(135deg,#86efac,#22c55e); }
        .d10-12-07-tag{ position:absolute; left:4px; bottom:4px; font-size:8px; font-weight:800; color:#fff; background:rgba(0,0,0,.55); padding:2px 5px; border-radius:4px; }
        .d10-12-07-tagfree{ position:absolute; left:4px; bottom:4px; font-size:8px; font-weight:800; color:#14532d; background:#fff; padding:2px 5px; border-radius:4px; }

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