Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div tabindex="0" class="tbx-1293" role="img" aria-label="音響機器のモックアップ。ホバーで色チャンネルがずれる"><span class="tbx-1293__blob"></span><span class="tbx-1293__object"></span><span class="tbx-1293__shine"></span><span class="tbx-1293__label">STUDIO / 09 <b>COLOR SEPARATION</b></span></div>CSS
*{box-sizing:border-box}
.tbx-1293{position:relative;isolation:isolate;width:295px;max-width:100%;height:160px;overflow:hidden;background:linear-gradient(135deg,#fce8c8,#ddd4df 55%,#aebfd1);border-radius:10px;font-family:system-ui,sans-serif;cursor:default}.tbx-1293__blob{position:absolute;width:240px;height:240px;top:-86px;left:43px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#f9cb7d,#db6372 80%);filter:blur(3px)}.tbx-1293__object{position:absolute;left:116px;top:20px;width:80px;height:114px;border-radius:40px 40px 21px 21px;background:linear-gradient(104deg,#102c3a 5%,#4b6e83 35%,#132a3c 52%,#060f1e 78%);border:5px solid #1b3142;box-shadow:inset 0 0 0 8px #bbd2db38, 12px 14px 18px #273f503a;transform:rotate(-13deg);transition:transform .36s}.tbx-1293__object::before{content:'';position:absolute;inset:9px;border:2px solid #a3d2d6;border-radius:32px 32px 14px 14px}.tbx-1293__shine{position:absolute;left:134px;top:43px;width:47px;height:73px;border-radius:30px;transform:rotate(-13deg);box-shadow:-9px 0 0 #f0377770,9px 0 0 #19b9e480;opacity:0;transition:opacity .18s,transform .4s}.tbx-1293__label{position:absolute;left:12px;bottom:12px;font-size:9px;letter-spacing:.1em;color:#233c56}.tbx-1293__label b{display:block;font-size:10px;margin-top:2px;letter-spacing:.02em}.tbx-1293:hover .tbx-1293__object,.tbx-1293:focus-visible .tbx-1293__object{transform:rotate(-13deg) translateX(5px)}.tbx-1293:hover .tbx-1293__shine,.tbx-1293:focus-visible .tbx-1293__shine{opacity:1;transform:rotate(-13deg) translateX(7px)}.tbx-1293:focus-visible{outline:3px solid #316eae;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1293 *,.tbx-1293::before,.tbx-1293::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
EC / Product
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。