CSS -Gitter und benutzerdefinierte Formen, Teil 3

In diesem Artikel werden visuell auffällige Bildgalerien mithilfe von CSS -Gitter-, Ausschnitt- und Maskierungstechniken ermittelt. Auf dem Aufbau von früheren Raten werden wir uns mit komplizierteren Formgestaltungen befassen. Wie zuvor bleibt der Fokus auf dem Erreichen komplexer Layouts mit minimalem HTML.

CSS -Gitter und benutzerdefinierte Formen -Serien recap

• Teil 1
• Teil 2
• Teil 3 (aktueller Artikel)

Vorgängerartikel Lesen: Obwohl nicht streng erforderlich, werden frühere Artikel dringend empfohlen, um den gesamten Bereich der Techniken zu erfassen. Jeder Artikel kann jedoch unabhängig verstanden werden.

Beginnen wir mit unserem ersten Beispiel.

Die-cut-Fotogalerie

Die HTML bleibt einfach:

<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>

Die Kernherausforderung besteht darin, CSS zu nutzen, um das visuelle Design zu erstellen. Das CSS verwendet ein quadratisches Gitter mit drei Spalten, wobei die Bilder strategisch positioniert werden, um Überlappungen zu erstellen:

.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;
}

Die grid Shorthand -Eigenschaft definiert das Netzlayout effizient. Die zweite und dritte Bilder werden explizit positioniert, sodass die anderen automatisch platziert werden können. clip-path wird dann verwendet, um den Stempelseffekt auf die überlappenden Bilder zu erzeugen:

.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%);
}

Ein Graustufen -Hover -Effekt verbessert die visuelle Anziehungskraft.

geteiltes Bild enthüllen

Dieses Beispiel zeigt einen Bild, das den Effekt auf den Schwebedruck enthüllt. Es werden zwei überlappende Bilder verwendet:

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

Die clip-path -Animation erstellt den Enthüllungseffekt. Drei Zustände sind definiert: kein Schwebe, schweben Sie das erste Bild und schweben Sie auf dem zweiten Bild. Der clip-path verwendet Dreipunkt-Polygone und nutzt das Konzept der "überfüllten" Formen, um das CSS zu vereinfachen. Ein Übergang wird angewendet, um die clip-path -Anänderungen bei schwebem Schwebeblauen reibungslos zu beleben.

PIE -Bild enthüllen

Dieses Beispiel erweitert den Enthüllungseffekt auf vier Bilder, die in einem kuchenähnlichen Layout angeordnet sind. Die clip-path -Animation erzeugt die Illusion eines Viertelkreises, der in Schwebeplätzen zu einem vollständigen Kreis ausgeht. Der Effekt wird durch sorgfältig gefertigte Sieben-Punkte-Polygone und schnelle Animation erreicht.

Mosaik der Bilder

In diesem Abschnitt werden ein Mosaik -Effekt aus mehreren überlappenden Bildern erstellt. Das Netzlayout wird sorgfältig durch Analyse der Bildanordnung bestimmt, was zu einem 2x4 -Gitter führt. clip-path wird verwendet, um einzelne Bilder so zu formen, dass sie das Mosaik entspricht.

komplexes Mosaik von Bildern

Dieses letzte Beispiel zeigt ein komplexeres, asymmetrisches Mosaik. Der Prozess der Bestimmung des Gitterlayouts und der clip-path -Werte ist detailliert, wodurch ein systematischer Ansatz zum Erstellen komplizierter Designs zeigt. Optimierungstechniken werden verwendet

Schlussfolgerung

Diese Serie zeigt die Kraft des CSS -Gitters und clip-path für die Erstellung komplexer Bildergalerie -Layouts mit minimalem HTML. Die Beispiele zeigen verschiedene Techniken und Ansätze und ermutigen die Leser, zu experimentieren und ihre eigenen einzigartigen Designs zu schaffen. Der Artikel schließt mit einer Herausforderung für die Leser, ihre eigenen Mosaiken mithilfe der zu erlernten Techniken zu erstellen.

Das obige ist der detaillierte Inhalt vonCSS -Gitter und benutzerdefinierte Formen, Teil 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!