パーツ番号 06-01-04 ・ CSSのみ

レビュー壁(メーソンリー風)

高さの異なるカードを敷き詰め、io-revealで順番にフェードイン。声の多さと熱量を一望させる実績ページに効果的です。

css

プレビュー

ソースコード

HTML

<div class="d06-01-04-wall io-reveal">
          <div class="d06-01-04-c" style="--d:0"><div class="d06-01-04-stars">★★★★★</div><p>短期間でここまで仕上げていただけるとは。感謝しかありません。丁寧で正確な仕事に脱帽です。</p><cite>K.I 様</cite></div>
          <div class="d06-01-04-c" style="--d:.12s"><div class="d06-01-04-stars">★★★★★</div><p>親身な対応でした。</p><cite>渡辺 様</cite></div>
          <div class="d06-01-04-c" style="--d:.24s"><div class="d06-01-04-stars">★★★★☆</div><p>価格以上の価値がありました。細部までこだわりを感じます。</p><cite>A.M 様</cite></div>
          <div class="d06-01-04-c" style="--d:.36s"><div class="d06-01-04-stars">★★★★★</div><p>また利用します。</p><cite>小林 様</cite></div>
        </div>

CSS

.d06-01-04{background:#faf5ff}
        .d06-01-04-wall{column-count:2;column-gap:12px;width:320px}
        .d06-01-04-c{break-inside:avoid;background:#fff;border-radius:12px;padding:16px 16px 14px;margin-bottom:12px;box-shadow:0 6px 16px rgba(120,60,160,.1);opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d)}
        .d06-01-04-wall.is-in .d06-01-04-c{opacity:1;transform:none}
        .d06-01-04-stars{color:#ffb400;font-size:12px;letter-spacing:1px;margin-bottom:6px}
        .d06-01-04-c p{margin:0 0 10px;color:#3d2f52;font-size:12.5px;line-height:1.7}
        .d06-01-04-c cite{font-style:normal;font-weight:700;color:#2a1f3d;font-size:11.5px}

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