パーツ番号 09-15-04 ・ CSSのみ

レベル数字入りバッジ

会員やユーザーの現在レベルを大きな数字で示すバッジの静止見本です。ゲーミフィケーション要素を持つ会員サイトの称号表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-15-04-wrap">
          <div class="d09-15-04-lv d09-15-04-l1"><span>LV</span><b>1</b></div>
          <div class="d09-15-04-lv d09-15-04-l2"><span>LV</span><b>5</b></div>
          <div class="d09-15-04-lv d09-15-04-l3"><span>LV</span><b>10</b></div>
          <div class="d09-15-04-lv d09-15-04-l4"><span>LV</span><b>20</b></div>
        </div>

CSS

.d09-15-04-wrap{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
        .d09-15-04-lv{width:56px;height:56px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.18)}
        .d09-15-04-lv span{font-size:9px;font-weight:700;opacity:.85;letter-spacing:.05em}
        .d09-15-04-lv b{font-size:20px;font-weight:800;line-height:1.1}
        .d09-15-04-l1{background:linear-gradient(145deg,#94a3b8,#64748b)}
        .d09-15-04-l2{background:linear-gradient(145deg,#4ade80,#16a34a)}
        .d09-15-04-l3{background:linear-gradient(145deg,#60a5fa,#2563eb)}
        .d09-15-04-l4{background:linear-gradient(145deg,#fbbf24,#d97706)}

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