パーツ番号 09-01-05 ・ CSSのみ

評価/ランクバッジ

GOLD・SILVER・BRONZEのメダル風バッジ。表面を光沢が繰り返し走る演出付き。会員ランクや実績評価の表示に映えます。

css

プレビュー

ソースコード

HTML

<div class="d09-01-05-row">
          <span class="d09-01-05-medal d09-01-05-gold">GOLD</span>
          <span class="d09-01-05-medal d09-01-05-silver">SILVER</span>
          <span class="d09-01-05-medal d09-01-05-bronze">BRONZE</span>
        </div>

CSS

.d09-01-05-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
        .d09-01-05-medal{position:relative;overflow:hidden;color:#5a4500;font-size:13px;font-weight:800;letter-spacing:.5px;padding:10px 16px;border-radius:8px;box-shadow:0 3px 8px rgba(0,0,0,.18)}
        .d09-01-05-gold{background:linear-gradient(135deg,#ffe27a,#e0a91b)}
        .d09-01-05-silver{background:linear-gradient(135deg,#f2f4f7,#a9b2bd);color:#3a434d}
        .d09-01-05-bronze{background:linear-gradient(135deg,#f0b98a,#b06a35);color:#4a2a12}
        .d09-01-05-medal::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);animation:d09-01-05-shine 2.8s ease-in-out infinite}
        @keyframes d09-01-05-shine{0%,60%{left:-60%}100%{left:130%}}

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