CSSグリッドとカスタムシェイプ、パート3-CSSチュートリアル-php.cn

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

Joseph Gordon-Levitt

リリース： 2025-03-10 11:23:08

オリジナル

231 人が閲覧しました

CSS Grid and Custom Shapes, Part 3

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

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

パート1

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

以前の記事の読み取り：

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

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

htmlは単純なままです：

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

<div class="gallery">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS Grid and Custom Shapes, Part 3 "><img src="/static/imghw/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グリッドが得られます。

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