Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1246"><a href="#portfolio" class="print"><span class="picture"><span class="sun"></span><span class="hill h1"></span><span class="hill h2"></span></span><span class="back"><strong>North Shore</strong><small>35mm — Summer 2026</small></span><span class="curl" aria-hidden="true"></span><span class="credit">ARCHIVE NO. 18</span></a></div>CSS
.tbx-1246{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1246 *, .tbx-1246 *::before,.tbx-1246 *::after{box-sizing:border-box}
.tbx-1246{background:#e6e7e1}.tbx-1246 .print{position:relative;display:block;width:min(100%,248px);height:161px;padding:9px;background:#fff;box-shadow:0 9px 18px #323e3d2c;transform:rotate(-2deg);text-decoration:none;transition:transform .45s}.tbx-1246 .picture{display:block;position:absolute;inset:9px 9px 26px;overflow:hidden;background:linear-gradient(#8cbfbd,#efc9a2 70%);isolation:isolate}.tbx-1246 .sun{position:absolute;right:40px;top:15px;width:35px;height:35px;background:#fff2cd;border-radius:50%}.tbx-1246 .hill{position:absolute;bottom:-45px;width:120%;height:120px;border-radius:50% 45% 0 0}.tbx-1246 .h1{left:-15%;background:#436c72;transform:rotate(-13deg)}.tbx-1246 .h2{left:35%;background:#244958;transform:rotate(18deg);bottom:-59px}.tbx-1246 .back{position:absolute;right:9px;bottom:28px;width:105px;height:70px;padding:18px 8px 6px;background:#efe3d4;color:#5b493f;display:grid;align-content:center;gap:5px;text-align:center;box-shadow:0 -3px 8px #2222}.tbx-1246 .back strong{font-size:11px}.tbx-1246 .back small{font-size:8px}.tbx-1246 .curl{position:absolute;right:9px;bottom:26px;width:112px;height:80px;background:linear-gradient(135deg,#2d586b 0%,#83b1ae 40%,#d2ddd0 60%,#fff 100%);transform-origin:bottom right;transform:rotate(0);clip-path:polygon(100% 0,100% 100%,0 100%);transition:transform .55s cubic-bezier(.2,.8,.2,1);box-shadow:0 3px 5px #3333}.tbx-1246 .credit{position:absolute;bottom:8px;left:10px;font-size:8px;color:#8c7e71;letter-spacing:.13em}.tbx-1246 .print:is(:hover,:focus-visible){transform:rotate(1deg) translateY(-3px)}.tbx-1246 .print:is(:hover,:focus-visible) .curl{transform:rotate(-74deg)}
@media(prefers-reduced-motion:reduce){.tbx-1246 *, .tbx-1246 *::before, .tbx-1246 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio, Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。