パーツ番号 01-07-09 ・ CSSのみ

画像コラージュヒーロー

複数の色ブロックを重ねて写真コラージュ風の奥行きを表現する構図です。WordPressのクリエイティブ系ポートフォリオに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-07-09-hero">
          <span class="d01-07-09-b d01-07-09-b1"></span>
          <span class="d01-07-09-b d01-07-09-b2"></span>
          <span class="d01-07-09-b d01-07-09-b3"></span>
          <span class="d01-07-09-b d01-07-09-b4"></span>
          <div class="d01-07-09-text">
            <h1>重なりが、奥行きをつくる。</h1>
          </div>
        </div>

CSS

.prev.d01-07-09{padding:0;display:block;min-height:300px}
        .d01-07-09-hero{position:relative;height:300px;background:#efe9e1;overflow:hidden}
        .d01-07-09-b{position:absolute;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.15)}
        .d01-07-09-b1{width:150px;height:110px;left:8%;top:14%;background:linear-gradient(135deg,#d9b48f,#b9855a);transform:rotate(-6deg)}
        .d01-07-09-b2{width:130px;height:100px;left:30%;top:40%;background:linear-gradient(135deg,#8fb3d9,#5a83b9);transform:rotate(4deg)}
        .d01-07-09-b3{width:120px;height:90px;right:10%;top:18%;background:linear-gradient(135deg,#a8c9a0,#6f9c66);transform:rotate(8deg)}
        .d01-07-09-b4{width:110px;height:85px;right:18%;bottom:12%;background:linear-gradient(135deg,#d9a0a8,#b95a6f);transform:rotate(-5deg)}
        .d01-07-09-text{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;padding:18px}
        .d01-07-09-text h1{margin:0;font-size:16px;font-weight:700;color:#3a2f22;background:rgba(255,255,255,.85);padding:8px 18px;border-radius:999px}

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