Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#case" class="tbx-1103"><span class="tbx-1103__shadow" aria-hidden="true"></span><span class="tbx-1103__panel"><span class="tbx-1103__top"><small>CASE STUDY</small><span aria-hidden="true">↗</span></span><span class="tbx-1103__art" aria-hidden="true"><i></i><b></b></span><strong>Brand System<br>Renewal</strong><span class="tbx-1103__base">VISUAL IDENTITY / 2026</span></span><span class="tbx-1103__index" aria-hidden="true">NO. 08</span></a>
CSS
.tbx-1103{position:relative;display:block;width:min(271px,100%);height:207px;color:#223f45;text-decoration:none;font-family:system-ui,sans-serif;isolation:isolate}
.tbx-1103__shadow{position:absolute;inset:16px 3px 0 15px;background:#c2d7d1;border:1px solid #8caea3;transform:translate(0,0);transition:transform .45s}
.tbx-1103__panel{position:absolute;inset:0 13px 14px 0;display:flex;flex-direction:column;padding:13px 16px;background:#f4f1e9;border:1px solid #d0d6d0;transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 6px 15px #1a504b12}
.tbx-1103__top{display:flex;justify-content:space-between;align-items:center}.tbx-1103__top small{font-size:9px;font-weight:750;letter-spacing:.1em}.tbx-1103__top span{font-size:18px}
.tbx-1103__art{display:flex;position:relative;width:100%;height:55px;margin:8px 0 7px;background:#d6e2d9;overflow:hidden}.tbx-1103__art i{width:75%;height:150%;background:#5c918a;transform:rotate(-16deg) translate(-15px,-12px);display:block}.tbx-1103__art b{width:30%;height:100%;background:#d7aa76;transform:skew(-25deg)}
.tbx-1103__panel strong{font:700 17px/1.08 Georgia,serif;margin:1px 0 7px}.tbx-1103__base{font-size:8px;font-weight:700;letter-spacing:.08em;color:#77928d}.tbx-1103__index{position:absolute;right:8px;bottom:2px;font-size:9px;font-weight:800;letter-spacing:.06em;color:#356a61;transition:transform .4s}
.tbx-1103:is(:hover,:focus-visible) .tbx-1103__panel{transform:translate(-6px,-8px)}.tbx-1103:is(:hover,:focus-visible) .tbx-1103__shadow{transform:translate(5px,5px)}.tbx-1103:is(:hover,:focus-visible) .tbx-1103__index{transform:translate(4px,1px)}
.tbx-1103:focus-visible{outline:3px solid #a8c7bc;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1103 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Case Study / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。