Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1248"><a href="#credential" class="credential"><span class="ribbon">CERTIFIED</span><span class="seal" aria-hidden="true">★</span><span class="info"><small>EXPERT NETWORK</small><strong>Design Partner</strong><span>Accreditation / No. 042</span></span><span class="verified"><b>✓ VERIFIED</b><span>Qualified creative specialist</span></span></a></div>CSS
.tbx-1248{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1248 *, .tbx-1248 *::before,.tbx-1248 *::after{box-sizing:border-box}
.tbx-1248{background:#f3ede2}.tbx-1248 .credential{position:relative;display:grid;gap:10px;align-content:center;width:min(100%,295px);height:164px;overflow:hidden;border-radius:8px;border:1px solid #cfba8b;padding:18px;background:repeating-linear-gradient(135deg,#fffaf0 0px,#fffaf0 6px,#f9f1e2 7px);color:#5e4b31;text-decoration:none;box-shadow:0 10px 24px #59432916}.tbx-1248 .ribbon{font-size:9px;letter-spacing:.19em;color:#a48855;font-weight:800}.tbx-1248 .seal{position:absolute;top:13px;right:18px;display:grid;place-items:center;width:56px;height:56px;border:2px dashed #b9a16e;border-radius:50%;font-size:26px;color:#bd9860;transition:transform .65s}.tbx-1248 .info{display:grid;gap:5px}.tbx-1248 .info small{font-size:9px;letter-spacing:.1em}.tbx-1248 .info strong{font-size:23px;line-height:1.1}.tbx-1248 .info span{font-size:10px;color:#987e54}.tbx-1248 .verified{position:absolute;left:0;right:0;bottom:0;background:#275f55;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 17px;transform:translateY(102%);transition:transform .46s}.tbx-1248 .verified b{font-size:11px}.tbx-1248 .verified span{font-size:9px}.tbx-1248 .credential:is(:hover,:focus-visible) .seal{transform:rotate(28deg) scale(1.08)}.tbx-1248 .credential:is(:hover,:focus-visible) .verified{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.tbx-1248 *, .tbx-1248 *::before, .tbx-1248 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Profile, Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。