Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1127" href="#build"><span class="tbx-1127__illustration" aria-hidden="true"><i class="tbx-1127__layer tbx-1127__one"></i><i class="tbx-1127__layer tbx-1127__two"></i><i class="tbx-1127__layer tbx-1127__three"></i></span><span class="tbx-1127__content"><small>ENGINEERED DETAILS</small><strong>Layered Design</strong><em>素材の構造を見る →</em></span></a>CSS
.tbx-1127{display:flex;flex-direction:column;position:relative;width:min(280px,100%);height:222px;background:#eff1eb;border:1px solid #d9e4db;border-radius:11px;text-decoration:none;color:#355351;font-family:system-ui,sans-serif;overflow:hidden;isolation:isolate}.tbx-1127__illustration{position:relative;display:block;flex:1;min-height:0;background:radial-gradient(circle at 48% 60%,#d0e2d2 0%,#e8efe7 64%)}.tbx-1127__layer{display:block;position:absolute;left:50%;top:50%;width:113px;height:66px;border-radius:11px;transform:translate(-50%,-50%) rotate(-25deg) skew(9deg,-4deg);box-shadow:7px 10px 8px #1d4e3c22;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.tbx-1127__one{background:#a7c6be;z-index:3}.tbx-1127__two{background:#f6d8a3;z-index:2;transform:translate(-45%,-33%) rotate(-25deg) skew(9deg,-4deg)}.tbx-1127__three{background:#447b84;z-index:1;transform:translate(-40%,-15%) rotate(-25deg) skew(9deg,-4deg)}.tbx-1127__content{display:flex;flex-direction:column;gap:5px;padding:15px 18px;background:#fff}.tbx-1127__content small{font-size:8px;font-weight:850;letter-spacing:.16em;color:#6c998a}.tbx-1127 strong{font-size:17px}.tbx-1127 em{font-size:10px;color:#6d8580;font-style:normal}.tbx-1127:is(:hover,:focus-visible) .tbx-1127__one{transform:translate(-55%,-99%) rotate(-25deg) skew(9deg,-4deg)}.tbx-1127:is(:hover,:focus-visible) .tbx-1127__two{transform:translate(-45%,-30%) rotate(-25deg) skew(9deg,-4deg)}.tbx-1127:is(:hover,:focus-visible) .tbx-1127__three{transform:translate(-34%,40%) rotate(-25deg) skew(9deg,-4deg)}.tbx-1127:focus-visible{outline:3px solid #4c897a;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1127 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Product / Features
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報は通常時から見える状態にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。