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

成約済み(SOLD)オーバーレイカード

写真をグレートーンにし斜めのSOLDスタンプと取り消し線価格を重ねた成約済み物件カードです。売却済み物件を一覧の中で区別して表示したい場合に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb">
            <span class="stamp">SOLD</span>
          </div>
          <div class="info">
            <p class="name">オーシャンビュー高台 501</p>
            <p class="price"><s>¥4,280万円</s></p>
            <p class="sub">成約済み</p>
          </div>
        </div>

CSS

.d10-14-12 .card{width:200px;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-14-12 .thumb{position:relative;height:100px;background:linear-gradient(135deg,#c7c7c7,#9a9a9a);display:flex;align-items:center;justify-content:center;}
        .d10-14-12 .stamp{border:3px solid rgba(255,255,255,.85);color:#fff;font-size:15px;font-weight:800;letter-spacing:.15em;padding:4px 14px;transform:rotate(-14deg);}
        .d10-14-12 .info{padding:12px 14px;}
        .d10-14-12 .name{font-size:12.5px;font-weight:700;color:#888;margin:0 0 6px;}
        .d10-14-12 .price{margin:0 0 4px;font-size:14px;font-weight:700;color:#aaa;}
        .d10-14-12 .sub{margin:0;font-size:11px;color:#c0392b;font-weight:700;}

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