← 静的パーツギャラリーへ戻る

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

ライブ配信中バッジ付きサムネイル

左上のLIVEバッジと同時視聴者数を組み合わせたサムネイルです。配信サイトのライブ配信一覧ページに使用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="thumb">
          <span class="live">LIVE</span>
          <span class="playbtn"><span class="tri"></span></span>
          <span class="viewers"><i class="dot"></i>2,481人視聴中</span>
        </div>

CSS

.d07-15-08 .thumb{position:relative;width:240px;height:135px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#2b2b3d,#141420);}
        .d07-15-08 .live{position:absolute;top:8px;left:8px;background:#e0393e;color:#fff;font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:4px;letter-spacing:.5px;}
        .d07-15-08 .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;}
        .d07-15-08 .tri{width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid #1e1e2c;margin-left:4px;}
        .d07-15-08 .viewers{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:4px;display:flex;align-items:center;}
        .d07-15-08 .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#e0393e;margin-right:5px;}

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