Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1188" href="#reviews"><span class="tbx-1188__paper tbx-1188__paper--back" aria-hidden="true"></span><span class="tbx-1188__paper tbx-1188__paper--mid" aria-hidden="true"></span><span class="tbx-1188__front"><span class="tbx-1188__rating">★★★★★ <small>CLIENT STORY</small></span><strong>“Thoughtful from<br>start to finish.”</strong><span class="tbx-1188__name">M. Kato — Project partner</span></span></a>
CSS
.tbx-1188{box-sizing:border-box;position:relative;display:block;width:276px;max-width:100%;height:178px;text-decoration:none;color:#253a43;font-family:system-ui,sans-serif;isolation:isolate}.tbx-1188__paper{position:absolute;inset:15px 12px 10px;background:#b9d8da;border:1px solid #97c6c9;border-radius:5px;transition:transform .45s}.tbx-1188__paper--back{background:#e7b6a8;transform:rotate(0deg)}.tbx-1188__paper--mid{background:#bdcfdc;transform:rotate(0deg)}.tbx-1188__front{position:absolute;inset:12px 12px 8px;background:#fffef9;border:1px solid #d6d1c5;border-radius:5px;box-shadow:0 6px 15px #3a556322;padding:15px 15px;display:flex;flex-direction:column;gap:12px;transition:transform .45s}.tbx-1188__rating{font-size:13px;letter-spacing:.06em;color:#bd8a3b}.tbx-1188__rating small{display:block;margin-top:6px;font-size:8px;font-weight:800;color:#79919e;letter-spacing:.14em}.tbx-1188__front strong{font:600 20px/1.13 Georgia,serif;color:#27434c}.tbx-1188__name{margin-top:auto;font-size:9px;font-weight:750;color:#697f8a}.tbx-1188:is(:hover,:focus-visible) .tbx-1188__paper--back{transform:translate(-12px,-7px) rotate(-7deg)}.tbx-1188:is(:hover,:focus-visible) .tbx-1188__paper--mid{transform:translate(11px,-7px) rotate(6deg)}.tbx-1188:is(:hover,:focus-visible) .tbx-1188__front{transform:translateY(-5px)}.tbx-1188:focus-visible{outline:3px solid #478fa1;outline-offset:4px}
@media (prefers-reduced-motion:reduce) {.tbx-1188,.tbx-1188 *,.tbx-1188::before,.tbx-1188::after,.tbx-1188 *::before,.tbx-1188 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Testimonials / Reviews
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。