Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<article class="tbx-1053" tabindex="0" aria-label="デザイナー 松本涼子 WebデザインとUI設計">
<div class="tbx-1053__visual" aria-hidden="true"><svg viewBox="0 0 160 118" role="presentation"><rect width="160" height="118" fill="#e1e9e7"/><circle cx="80" cy="42" r="24" fill="#dbab85"/><path d="M55 38Q58 8 82 15Q111 18 104 56Q100 41 94 31Q78 47 59 42Z" fill="#34465b"/><path d="M38 118Q42 75 80 75Q120 75 123 118Z" fill="#668c92"/><path d="M70 76L80 89L91 76" fill="#f1d9c3"/></svg><span class="tbx-1053__stamp">PROFILE</span></div>
<div class="tbx-1053__info"><span>DESIGNER</span><b>松本 涼子</b><small>Web Design / UI Planning</small><em>#UI設計 #デザイン</em></div>
</article>
CSS
.tbx-1053{width:min(224px,100%);background:#fff;border:1px solid #dce5e2;border-radius:9px;overflow:hidden;color:#294458;font-family:system-ui;transition:box-shadow .3s,border-color .3s;cursor:default}
.tbx-1053__visual{height:128px;position:relative;overflow:hidden;background:#e1e9e7}.tbx-1053 svg{height:100%;width:100%;display:block;transition:transform .45s}.tbx-1053__stamp{position:absolute;right:10px;top:10px;color:white;background:#244f60c9;border-radius:3px;padding:5px 7px;font-size:9px;letter-spacing:.11em;transform:translateY(-14px);opacity:0;transition:opacity .3s,transform .3s}
.tbx-1053__info{display:grid;gap:4px;padding:11px 14px 14px}.tbx-1053__info>span{font-size:9px;letter-spacing:.11em;color:#709094}.tbx-1053__info>b{font-size:14px}.tbx-1053__info>small{font-size:10px;color:#667c89}.tbx-1053__info>em{font-style:normal;font-size:9px;font-weight:700;color:#8c7356;border-top:1px solid #e6ece9;padding-top:7px;margin-top:4px;transition:color .3s}
.tbx-1053:is(:hover,:focus-visible){box-shadow:0 14px 28px #1d4a591b;border-color:#81b1ad}.tbx-1053:is(:hover,:focus-visible) svg{transform:scale(1.085)}.tbx-1053:is(:hover,:focus-visible) .tbx-1053__stamp{transform:translateY(0);opacity:1}.tbx-1053:is(:hover,:focus-visible) em{color:#1e7776}
.tbx-1053:focus-visible{outline:3px solid #d8a46b;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1053,.tbx-1053 svg,.tbx-1053__stamp,.tbx-1053__info>em{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Team / About
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。