パーツ番号 07-15-07 ・ CSSのみ

プレイリスト風連番サムネイル

背後に重なるカードで複数動画をまとめて収録していることを表現したプレイリスト表示です。連載講座の一覧に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="stack">
          <span class="layer l1"></span>
          <span class="layer l2"></span>
          <div class="thumb">
            <span class="playbtn"><span class="tri"></span></span>
            <span class="count">1 / 24</span>
          </div>
        </div>

CSS

.d07-15-07 .stack{position:relative;width:220px;height:130px;}
        .d07-15-07 .layer{position:absolute;left:0;right:0;height:118px;border-radius:8px;background:#cfd3dc;}
        .d07-15-07 .l1{top:12px;transform:scale(.94);background:#c3c8d4;}
        .d07-15-07 .l2{top:6px;transform:scale(.97);background:#d8dbe4;}
        .d07-15-07 .thumb{position:absolute;top:0;left:0;right:0;height:118px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#5a7ab0,#2d4776);}
        .d07-15-07 .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;}
        .d07-15-07 .tri{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid #223a63;margin-left:3px;}
        .d07-15-07 .count{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);color:#fff;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:4px;}

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