CSSグリッドとカスタムシェイプ、パート3

この記事では、CSSグリッド、クリッピング、およびマスキングテクニックを使用して、視覚的に印象的な画像ギャラリーの作成の調査を続けています。 以前の分割払いに基づいて、より複雑な形状のデザインを掘り下げます。 前と同様に、最小限のHTMLで複雑なレイアウトを達成することに焦点を当てています。

CSSグリッドとカスタムシェイプシリーズの要約

パート1

• パート2
• パート3（現在の記事）

以前の記事の読み取り：

厳密に必要ではありませんが、あらゆる手法を把握するには以前の記事を強くお勧めします。 ただし、各記事は独立して理解できます 最初の例から始めましょう。

ダイカットフォトギャラリー

htmlは単純なままです：

コアチャレンジは、CSSを活用して視覚設計を作成することです。 CSSは、3つの列を備えた正方形のグリッドを使用し、画像を戦略的に配置してオーバーラップを作成します。

<div class="gallery">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 ">
</div>

Shorthandプロパティは、グリッドレイアウトを効率的に定義します。 2番目と3番目の画像は明示的に配置されており、他の画像が自動場所に配置されます。

は、重複する画像にダイカット効果を作成するために使用されます。

.gallery {
  --g: 6px; /* Gap between images */

  display: grid;
  width: 450px;
  aspect-ratio: 1; /* Square grid */
  grid: auto-flow 1fr / repeat(3, 1fr);
  gap: var(--g);
}
.gallery img:nth-child(2) {
  grid-area: 1 / 2 / span 2 / span 2;
}
.gallery img:nth-child(3) {
  grid-area: 2 / 1 / span 2 / span 2;
}

グレースケールのホバー効果により、視覚的な魅力が向上します grid分割画像が明らかになりましたclip-path

この例は、ホバーに対する画像を明らかにする効果を示しています。 2つの重複する画像が使用されます：

.gallery img:nth-child(2) {
  /* ... other styles ... */
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + var(--g) / 4) 100%, 0 calc(50% - var(--g) / 4));
}
.gallery img:nth-child(3) {
  /* ... other styles ... */
  clip-path: polygon(0 0, calc(50% - var(--g) / 4) 0, 100% calc(50% + var(--g) / 4), 100% 100%, 0 100%);
}

アニメーションは、明らかな効果を作成します。 3つの状態が定義されています。ホバーなし、最初の画像にホバーし、2番目の画像にホバリングします。

は3点ポリゴンを使用して、「オーバーフロー」形状の概念を活用してCSSを簡素化します。 トランジションが適用され、ホバーの

変更をスムーズにアニメーション化します。

パイ画像が明らかになります

.gallery {
  display: grid;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 350px;
  aspect-ratio: 1;
}

この例は、パイのようなレイアウトに配置された4つの画像に明らかな効果を拡張します。 clip-pathアニメーションは、クォーターサークルがホバーの完全な円に拡大するという幻想を作成します。 効果は、慎重に作成された7点ポリゴンとラピッドアニメーションによって達成されます。 clip-path画像のモザイクclip-path このセクションでは、複数のオーバーラップ画像からモザイク効果を作成することを調査します。 グリッドレイアウトは、画像の配置を分析することにより慎重に決定され、2x4グリッドが得られます。

は、モザイクに合う個々の画像を形作るために使用されます。

画像の複雑なモザイク

この最後の例は、より複雑で非対称モザイクを示しています。 グリッドレイアウトとclip-path値を決定するプロセスは詳細であり、複雑なデザインを作成するための体系的なアプローチを示しています。 最適化手法は、

宣言の数を減らすために採用されています。

結論

このシリーズは、最小限のHTMLで洗練されたイメージギャラリーレイアウトを作成するためのCSSグリッドのパワーと

を紹介しています。 この例は、さまざまなテクニックとアプローチを示しており、読者が独自のユニークなデザインを実験して作成することを奨励しています。 この記事は、読者が学んだテクニックを使用して独自のモザイクを作成するという挑戦で締めくくります。

以上がCSSグリッドとカスタムシェイプ、パート3の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。