パーツ番号 07-14-08 ・ CSSのみ

Before/After比較スライダー風静止表示

加工前後を左右に並べて中央にハンドルを添えた静止版の比較見本です。WordPressの写真加工サービスやリノベーション事例紹介ページの実績表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-14-08-card">
          <div class="d07-14-08-split">
            <div class="d07-14-08-half d07-14-08-before">
              <span class="d07-14-08-tag">Before</span>
            </div>
            <div class="d07-14-08-half d07-14-08-after">
              <span class="d07-14-08-tag">After</span>
            </div>
            <div class="d07-14-08-line"><span class="d07-14-08-handle"></span></div>
          </div>
        </div>

CSS

.d07-14-08-card{width:230px}
        .d07-14-08-split{position:relative;width:230px;height:150px;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(15,23,42,.14)}
        .d07-14-08-half{position:absolute;top:0;width:50%;height:100%;background:linear-gradient(180deg,#bae6fd 0%,#7dd3fc 38%,#38bdf8 50%,#15803d 51%,#22c55e 72%,#14532d 100%)}
        .d07-14-08-before{left:0;filter:none}
        .d07-14-08-after{right:0;filter:contrast(1.3) saturate(1.5) sepia(.15)}
        .d07-14-08-tag{position:absolute;top:8px;font-size:10px;font-weight:700;color:#fff;background:rgba(15,23,42,.55);padding:2px 8px;border-radius:99px}
        .d07-14-08-before .d07-14-08-tag{left:8px}
        .d07-14-08-after .d07-14-08-tag{right:8px}
        .d07-14-08-line{position:absolute;top:0;left:50%;width:2px;height:100%;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.3);transform:translateX(-1px)}
        .d07-14-08-handle{position:absolute;top:50%;left:50%;width:22px;height:22px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.35)}

クラス名 .d07-14-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。