Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1183" href="#journal"><span class="tbx-1183__eyebrow">EDITORIAL / VOL.06</span><span class="tbx-1183__line">MAKE IT <em>matter.</em></span><span class="tbx-1183__desc">An editorial exploration ↗</span></a>
CSS
.tbx-1183{box-sizing:border-box;display:grid;align-content:center;gap:13px;width:292px;max-width:100%;height:151px;padding:19px;background:#fff6ed;color:#253b49;text-decoration:none;border:1px solid #eddfcd;font-family:system-ui,sans-serif;overflow:hidden}.tbx-1183__eyebrow{font-size:9px;color:#a16c4e;font-weight:850;letter-spacing:.17em}.tbx-1183__line{font:bold 22px/1.2 Georgia,serif;white-space:nowrap;letter-spacing:-.04em}.tbx-1183__line em{display:inline-block;transform-origin:left bottom;color:#b45256;font-size:30px;font-weight:bold;transition:transform .45s cubic-bezier(.2,.8,.2,1),letter-spacing .45s,color .3s}.tbx-1183__desc{font-size:10px;font-weight:750;letter-spacing:.08em;border-top:1px solid #dbc7b5;padding-top:10px}.tbx-1183:is(:hover,:focus-visible) em{transform:skewX(-13deg) translateX(7px);letter-spacing:.015em;color:#713e85}.tbx-1183:focus-visible{outline:3px solid #b45256;outline-offset:3px}@media(max-width:360px){.tbx-1183__line{font-size:19px}.tbx-1183__line em{font-size:27px}}
@media (prefers-reduced-motion:reduce) {.tbx-1183,.tbx-1183 *,.tbx-1183::before,.tbx-1183::after,.tbx-1183 *::before,.tbx-1183 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Hero
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。