Palette Unfold Portfolio Card

Live Demo

マウスを乗せるかTabキーでフォーカスして変化を確認してください。

Source Code

必要なコードをコピーして実装に利用できます。

<a href="#work" class="tbx-1175"><span class="tbx-1175__swatch" aria-hidden="true"><i></i><i></i><i></i></span><span class="tbx-1175__info"><b>IDENTITY / NORD</b><small>Visual design system</small></span><span class="tbx-1175__colors" aria-hidden="true"><i>#F4CBA5</i><i>#4A8790</i><i>#263F55</i></span></a>

.tbx-1175{box-sizing:border-box;width:272px;max-width:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;border-radius:12px;border:1px solid #d9e2e4;text-decoration:none;color:#293f50;background:#fff;box-shadow:0 6px 18px #21364413;padding:13px}.tbx-1175__swatch{display:flex;width:100%;height:77px;gap:3px;overflow:hidden;border-radius:7px}.tbx-1175__swatch i{flex:1;background:#f4cba5;transform-origin:bottom;transition:transform .45s}.tbx-1175__swatch i:nth-child(2){background:#4a8790;transition-delay:.06s}.tbx-1175__swatch i:nth-child(3){background:#263f55;transition-delay:.12s}.tbx-1175__info{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:12px 0 1px;font:700 10px system-ui;letter-spacing:.05em}.tbx-1175__info small{font:400 10px system-ui;color:#647a87}.tbx-1175__colors{display:flex;gap:4px;max-height:0;opacity:0;overflow:hidden;transition:max-height .43s,opacity .35s,padding .43s;padding:0}.tbx-1175__colors i{flex:1;font:normal 9px system-ui;letter-spacing:-.04em;text-align:center;background:#edf3f4;border-radius:4px;padding:5px 1px}.tbx-1175:is(:hover,:focus-visible) .tbx-1175__colors{max-height:38px;padding:7px 0 0;opacity:1}.tbx-1175:is(:hover,:focus-visible) .tbx-1175__swatch i:nth-child(2){transform:scaleY(.83)}.tbx-1175:focus-visible{outline:3px solid #117583;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1175, .tbx-1175 *, .tbx-1175::before, .tbx-1175::after, .tbx-1175 *::before, .tbx-1175 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }

How to Use

HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。

Use Case

Portfolio / Design

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。

Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。

Reduced Motion：prefers-reduced-motion: reduceに対応。