Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1184" href="#essay"><span class="tbx-1184__number">ESSAY — 013</span><span class="tbx-1184__title">The art of<br>noticing details<span class="tbx-1184__glyph" aria-hidden="true">✳</span></span><span class="tbx-1184__foot">Read this essay <b aria-hidden="true">→</b></span></a>
CSS
.tbx-1184{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;width:268px;max-width:100%;height:175px;padding:18px 19px;background:#eaf1f4;color:#244456;text-decoration:none;border-left:5px solid #79a6ba;overflow:hidden;font-family:system-ui,sans-serif}.tbx-1184__number{font:800 9px system-ui;letter-spacing:.17em;color:#698e9e}.tbx-1184__title{font:600 27px/1.08 Georgia,serif;letter-spacing:-.025em}.tbx-1184__glyph{display:inline-block;color:#cf765d;margin-left:3px;transform:translate(-12px,12px) rotate(-50deg) scale(.2);opacity:0;transition:opacity .2s,transform .5s cubic-bezier(.14,.8,.2,1)}.tbx-1184__foot{font-size:10px;font-weight:750;display:flex;justify-content:space-between}.tbx-1184__foot b{font-size:17px;transition:transform .3s}.tbx-1184:is(:hover,:focus-visible) .tbx-1184__glyph{opacity:1;transform:translate(2px,-2px) rotate(23deg) scale(1)}.tbx-1184:is(:hover,:focus-visible) .tbx-1184__foot b{transform:translateX(5px)}.tbx-1184:focus-visible{outline:3px solid #4b889f;outline-offset:3px}
@media (prefers-reduced-motion:reduce) {.tbx-1184,.tbx-1184 *,.tbx-1184::before,.tbx-1184::after,.tbx-1184 *::before,.tbx-1184 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Article / Typography
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。