CSS Grid und benutzerdefinierte Formen, Teil 2

Nun, als wir uns das letzte Mal getroffen haben, verwendeten wir CSS Grid und kombinierten es mit CSS clip-path und mask Techniken, um Grids mit schicken Formen zu erstellen.

Hier ist nur eines der fantastischen Grids, die wir zusammen erstellt haben

Bereit für die zweite Runde? Wir arbeiten weiterhin mit CSS Grid, clip-path und mask, aber am Ende dieses Artikels werden wir verschiedene Möglichkeiten haben, Bilder im Grid anzuordnen, einschließlich einiger cooler Hover-Effekte, die ein authentisches, interaktives Erlebnis für die Betrachtung von Bildern bieten.

Und wissen Sie was? Wir verwenden den gleichen Markup, den wir letztes Mal verwendet haben. Hier ist er noch einmal

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <!-- as many times as we want -->
</div>

Wie im vorherigen Artikel benötigen wir nur einen Container mit Bildern darin. Nichts weiter!

Verschachteltes Bild-Grid

Letztes Mal waren unsere Grids, nun ja, typische Bild-Grids. Abgesehen von den schönen Formen, mit denen wir sie maskiert haben, waren sie ziemlich standardmäßige symmetrische Grids, was die Positionierung der Bilder darin betrifft.

Versuchen wir, ein Bild in der Mitte des Grids zu verschachteln

Wir beginnen mit einem 2×2 Grid für vier Bilder

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gap between images */

  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
}
.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
}

Noch nichts Komplexes. Der nächste Schritt ist, die Ecke unserer Bilder abzuschneiden, um Platz für das verschachtelte Bild zu schaffen. Ich habe bereits einen detaillierten Artikel darüber, wie man Ecken mit den Eigenschaften clip-path und mask abschneidet. Sie können auch meinen Online-Generator verwenden, um den CSS-Code für maskierte Ecken zu erhalten.

Was wir hier brauchen, ist das Abschneiden der Ecken in einem Winkel von 90deg. Wir können die gleiche Conic-Gradient-Technik aus diesem Artikel verwenden, um das zu tun

.gallery > img {
   mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }

Wir könnten die clip-path-Methode zum Abschneiden von Ecken aus demselben Artikel verwenden, aber das Maskieren mit Farbverläufen ist hier besser geeignet, da wir die gleiche Konfiguration für alle Bilder haben – alles, was wir brauchen, ist eine Rotation (definiert durch die Variable --_a), um den Effekt zu erzielen, also maskieren wir von innen statt von den Außenkanten.

Jetzt können wir das verschachtelte Bild in den maskierten Bereich einfügen. Zuerst stellen wir sicher, dass wir ein fünftes Bildelement im HTML haben

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
</div>

Wir werden uns auf die gute alte absolute Positionierung verlassen, um es dort zu platzieren

.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

Die Eigenschaft inset ermöglicht es uns, das Bild mit einer einzigen Deklaration in der Mitte zu platzieren. Wir kennen die Größe des Bildes (definiert durch die Variable --s) und wir wissen, dass die Größe des Containers 100% beträgt. Wir machen etwas Mathematik, und der Abstand von jeder Kante sollte gleich (100% - var(--s))/2 sein.

Sie fragen sich vielleicht, warum wir hier überhaupt clip-path verwenden. Wir verwenden es mit dem verschachtelten Bild, um einen konsistenten Abstand zu erhalten. Wenn wir es entfernen würden, würden Sie feststellen, dass wir nicht den gleichen Abstand zwischen allen Bildern haben. Auf diese Weise schneiden wir ein kleines Stück vom fünften Bild ab, um den richtigen Abstand darum zu erhalten.

Der vollständige Code noch einmal

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px;  /* controls the gap between images */
  
  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
  position: relative;
}

.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}

.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a:  0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

Nun fragen sich viele von Ihnen vielleicht auch: Warum all der komplexe Kram, wenn wir das letzte Bild oben platzieren und einen Rahmen hinzufügen können? Das würde die darunter liegenden Bilder ohne Maske verstecken, oder?

Das stimmt, und wir werden Folgendes erhalten

Keine mask, keine clip-path. Ja, der Code ist leicht verständlich, aber es gibt einen kleinen Nachteil: Die Rahmenfarbe muss dieselbe wie der Haupt-Hintergrund sein, um die Illusion perfekt zu machen. Dieser kleine Nachteil reicht mir aus, um den Code komplexer zu gestalten im Austausch gegen echte Transparenz, unabhängig vom Hintergrund. Ich sage nicht, dass ein Rahmen-Ansatz schlecht oder falsch ist. Ich würde ihn in den meisten Fällen empfehlen, in denen der Hintergrund bekannt ist. Aber wir sind hier, um neue Dinge zu erforschen und, am wichtigsten, Komponenten zu bauen, die nicht von ihrer Umgebung abhängen.

Versuchen wir diesmal eine andere Form

Dieses Mal haben wir das verschachtelte Bild zu einem Kreis statt zu einem Quadrat gemacht. Das ist mit border-radius eine einfache Aufgabe. Aber wir brauchen einen kreisförmigen Ausschnitt für die anderen Bilder. Dieses Mal werden wir uns jedoch auf ein radial-gradient() anstelle eines conic-gradient() verlassen, um diesen schönen runden Look zu erzielen.

.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0%   - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0%   - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0%   - var(--g)/2) calc(0%   - var(--g)/2); }

Alle Bilder verwenden die gleiche Konfiguration wie im vorherigen Beispiel, aber wir aktualisieren den Mittelpunkt jedes Mal.

Die obige Abbildung zeigt den Mittelpunkt für jeden Kreis. Dennoch werden Sie im tatsächlichen Code feststellen, dass ich auch den Abstand berücksichtige, um sicherzustellen, dass alle Punkte an derselben Position (der Mitte des Grids) liegen, um einen kontinuierlichen Kreis zu erhalten, wenn wir sie kombinieren.

Nun, da wir unser Layout haben, sprechen wir über den Hover-Effekt. Falls Sie es nicht bemerkt haben, ein cooler Hover-Effekt vergrößert das verschachtelte Bild und passt alles andere entsprechend an. Die Vergrößerung ist eine relativ einfache Aufgabe, aber das Aktualisieren des Farbverlaufs ist komplizierter, da Farbverläufe standardmäßig nicht animiert werden können. Um dies zu überwinden, werde ich einen font-size-Hack verwenden, um den radialen Farbverlauf animieren zu können.

Wenn Sie sich den Code des Farbverlaufs ansehen, sehen Sie, dass ich 1em hinzufüge

mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));

Es ist bekannt, dass em-Einheiten relativ zur font-size des übergeordneten Elements sind. Daher wird durch Ändern der font-size von .gallery auch der berechnete em-Wert geändert – das ist der Trick, den wir verwenden. Wir animieren die font-size von einem Wert von 0 zu einem gegebenen Wert, und infolgedessen wird der Farbverlauf animiert, wodurch der ausgeschnittene Teil größer wird und der Größe des sich vergrößernden verschachtelten Bildes folgt.

Hier ist der Code, der die Teile hervorhebt, die am Hover-Effekt beteiligt sind

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gaps between images */

  font-size: 0; /* initially we have 1em = 0 */
  transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
  width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
  font-size: calc(var(--s) / 5);
}

Der font-size-Trick ist hilfreich, wenn wir Farbverläufe oder andere Eigenschaften animieren möchten, die nicht animiert werden können. Custom Properties, die mit @property definiert sind, können ein solches Problem lösen, aber die Unterstützung dafür fehlt derzeit noch zum Zeitpunkt des Schreibens.

Ich habe den font-size-Trick von @SelenIT2 entdeckt, als ich versuchte, eine Herausforderung auf Twitter zu lösen.

Eine weitere Form? Los geht's!

Dieses Mal haben wir das verschachtelte Bild in die Form einer Raute geschnitten. Ich überlasse es Ihnen, den Code zu analysieren, um herauszufinden, wie wir hierher gekommen sind. Sie werden feststellen, dass die Struktur dieselbe ist wie in unseren Beispielen. Die einzigen Unterschiede liegen darin, wie wir den Farbverlauf verwenden, um die Form zu erzeugen. Graben Sie sich ein und lernen Sie!

Kreisförmiges Bild-Grid

Wir können das, was wir hier und in früheren Artikeln gelernt haben, kombinieren, um ein noch spannenderes Bild-Grid zu erstellen. Dieses Mal machen wir alle Bilder in unserem Grid kreisförmig und lassen beim Hover ein Bild expandieren, um das Ganze freizugeben, während es die restlichen Fotos überdeckt.

Die HTML- und CSS-Struktur des Grids ist nichts Neues von zuvor, also überspringen wir diesen Teil und konzentrieren uns stattdessen auf die gewünschte Kreisform und den Hover-Effekt.

Wir werden clip-path und seine circle()-Funktion verwenden, um – Sie haben es erraten! – einen Kreis aus den Bildern auszuschneiden.

Diese Abbildung zeigt den clip-path für das erste Bild. Die linke Seite zeigt den anfänglichen Zustand des Bildes, während die rechte Seite den Zustand nach dem Hover zeigt. Sie können dieses Online-Tool verwenden, um mit den clip-path-Werten zu spielen und sie zu visualisieren.

Für die anderen Bilder können wir das Zentrum des Kreises (70% 70%) aktualisieren, um den folgenden Code zu erhalten

.gallery > img:hover {
  --_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
  clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
  clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
  clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
  clip-path: circle(var(--_c, 55% at 30% 30%));
}

Beachten Sie, wie wir die clip-path-Werte als Fallback innerhalb von var() definieren. Diese Vorgehensweise ermöglicht es uns, den Wert beim Hover einfacher zu aktualisieren, indem wir den Wert der Variablen --_c setzen. Bei Verwendung von circle() ist die Standardposition des Mittelpunkts 50% 50%, sodass wir diese für einen prägnanteren Code weglassen können. Deshalb sehen Sie, dass wir nur 50% statt 50% at 50% 50% angeben.

Dann vergrößern wir unser Bild beim Hover auf die Gesamtgröße des Grids, damit es die anderen Bilder überdecken kann. Wir stellen auch sicher, dass der z-index bei dem gehoverten Bild einen höheren Wert hat, damit es das oberste in unserem Stacking Context ist.

.gallery {
  --s: 200px; /* controls the image size */
  --g: 8px;   /* controls the gap between images */

  display: grid;
  grid: auto-flow var(--s) / repeat(2, var(--s));
  gap: var(--g);
}

.gallery > img {
  width: 100%; 
  aspect-ratio: 1;
  cursor: pointer;
  z-index: 0;
  transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
  --_c: 50%; /* change the center point on hover */
  width: calc(200% + var(--g));
  z-index: 1;
  transition: .4s, z-index 0s;
}

.gallery > img:nth-child(1){
  clip-path: circle(var(--_c, 55% at 70% 70%));
  place-self: start;
}
.gallery > img:nth-child(2){
  clip-path: circle(var(--_c, 55% at 30% 70%));
  place-self: start end;
}
.gallery > img:nth-child(3){
  clip-path: circle(var(--_c, 55% at 70% 30%));
  place-self: end start;
}
.gallery > img:nth-child(4){
  clip-path: circle(var(--_c, 55% at 30% 30%));
  place-self: end;
}

Was passiert mit der Eigenschaft place-self? Warum brauchen wir sie und warum hat jedes Bild einen bestimmten Wert?

Erinnern Sie sich an das Problem, das wir im vorherigen Artikel hatten, als wir das Grid aus Puzzleteilen erstellten? Wir haben die Größe der Bilder erhöht, um einen Überlauf zu erzeugen, aber der Überlauf einiger Bilder war falsch. Wir haben ihn mit der Eigenschaft place-self behoben.

Gleiches Problem hier. Wir vergrößern die Bilder, sodass jedes seine Rasterzellen überläuft. Aber wenn wir nichts tun, werden sie alle auf der rechten und unteren Seite des Grids überlaufen. Was wir brauchen, ist

1. das erste Bild, das über die untere rechte Kante überläuft (das Standardverhalten),
2. das zweite Bild, das über die untere linke Kante überläuft,
3. das dritte Bild, das über die obere rechte Kante überläuft, und
4. das vierte Bild, das über die obere linke Kante überläuft.

Um das zu erreichen, müssen wir jedes Bild mit der Eigenschaft place-self korrekt platzieren.

Falls Sie mit place-self nicht vertraut sind, es ist die Kurzschreibweise für justify-self und align-self, um das Element horizontal und vertikal zu platzieren. Wenn es einen Wert annimmt, verwenden beide Ausrichtungen denselben Wert.

Expandierende Bildpaneele

In einem früheren Artikel habe ich einen coolen Zoom-Effekt erstellt, der auf ein Grid von Bildern angewendet wird, bei dem wir alles steuern können: Anzahl der Zeilen, Anzahl der Spalten, Größen, Skalierungsfaktor usw.

Ein Sonderfall waren die klassischen expandierenden Paneele, bei denen wir nur eine Zeile und einen Container in voller Breite haben.

Wir nehmen dieses Beispiel und kombinieren es mit Formen!

Bevor wir weitermachen, empfehle ich Ihnen dringend, meinen anderen Artikel zu lesen, um zu verstehen, wie die Tricks, die wir gleich behandeln werden, funktionieren. Schauen Sie sich das an, und wir machen hier weiter, um uns auf die Erstellung der Paneelformen zu konzentrieren.

Zuerst beginnen wir damit, den Code zu vereinfachen und einige Variablen zu entfernen

Wir brauchen nur eine Zeile und die Anzahl der Spalten sollte sich an der Anzahl der Bilder orientieren. Das bedeutet, dass wir keine Variablen mehr für die Anzahl der Zeilen (--n) und Spalten (--m) benötigen, aber wir müssen grid-auto-flow: column verwenden, damit das Grid Spalten automatisch generiert, wenn wir neue Bilder hinzufügen. Wir werden eine feste Höhe für unseren Container berücksichtigen; standardmäßig wird er vollbereit sein.

Lassen Sie uns die Bilder in eine schräge Form schneiden

Wieder ist jedes Bild in seiner Rasterzelle enthalten, sodass mehr Abstand zwischen den Bildern ist, als uns lieb ist

Wir müssen die Breite der Bilder erhöhen, um eine Überlappung zu erzeugen. Wir ersetzen min-width: 100% durch min-width: calc(100% + var(--s)), wobei --s eine neue Variable ist, die die Form steuert.

Jetzt müssen wir das erste und das letzte Bild korrigieren, damit sie sozusagen über den Rand des Bildschirms hinausragen, ohne Lücken. Mit anderen Worten, wir können die Schräge von der linken Seite des ersten Bildes und die Schräge von der rechten Seite des letzten Bildes entfernen. Wir benötigen einen neuen clip-path speziell für diese beiden Bilder.

Wir müssen auch den Überlauf korrigieren. Standardmäßig werden alle Bilder auf beiden Seiten überlaufen, aber für das erste benötigen wir einen Überlauf auf der rechten Seite, während wir für das letzte Bild einen linken Überlauf benötigen.

.gallery > img:first-child {
  min-width: calc(100% + var(--s)/2);
  place-self: start;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
  min-width: calc(100% + var(--s)/2);
  place-self: end;
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}

Das Endergebnis ist ein schönes, expandierendes Paneel mit schrägen Bildern!

Wir können beliebig viele Bilder hinzufügen, und das Grid passt sich automatisch an. Außerdem müssen wir nur einen Wert kontrollieren, um die Form zu steuern!

Wir hätten dasselbe Layout auch mit Flexbox erstellen können, da wir es mit einer einzelnen Zeile von Elementen zu tun haben. Hier ist meine Implementierung.

Sicher, schräge Bilder sind cool, aber was ist mit einem Zickzackmuster? Das habe ich bereits am Ende des letzten Artikels angeteasert.

Ich ersetze hier nur clip-path durch mask… und wissen Sie was? Ich habe bereits einen detaillierten Artikel über das Erstellen dieser Zickzackform – ganz zu schweigen von einem Online- Generator, um den Code zu erhalten. Sehen Sie, wie alles zusammenkommt?

Der kniffligste Teil ist hier, sicherzustellen, dass die Zickzacklinien perfekt ausgerichtet sind, und dafür müssen wir für jedes :nth-child(odd)-Bildelement einen Versatz hinzufügen.

.gallery > img {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
    conic-gradient(from   45deg at left,  #0000, #000 1deg 89deg, #0000 90deg) 
      0%   calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
  --_p: var(--s);
}
.gallery > img:first-child {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
  mask: 
    conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}

Beachten Sie die Verwendung der Variablen --_p, die standardmäßig auf 0% zurückfällt, aber gleich --_s für die ungeraden Bilder ist.

Hier ist eine Demo, die das Problem veranschaulicht. Hovern Sie darüber, um zu sehen, wie der Versatz – definiert durch --_p – die Ausrichtung korrigiert.

Beachten Sie auch, wie wir für das erste und letzte Bild eine andere Maske verwenden, wie im vorherigen Beispiel. Wir benötigen nur eine Zickzacklinie auf der rechten Seite des ersten Bildes und auf der linken Seite des letzten Bildes.

Und warum nicht abgerundete Seiten? Machen wir das!

Ich weiß, dass der Code gruselig und schwer zu verstehen aussehen mag, aber alles, was hier passiert, ist eine Kombination aus verschiedenen Tricks, die wir in diesem und anderen Artikeln, die ich bereits geteilt habe, behandelt haben. In diesem Fall verwende ich die gleiche Code-Struktur wie bei den Zickzack- und schrägen Formen. Vergleichen Sie es mit diesen Beispielen, und Sie werden keinen Unterschied feststellen! Das sind die gleichen Tricks in meinem vorherigen Artikel über den Zoom-Effekt. Dann verwende ich meine anderen Schriften und meinen Online-Generator, um den Code für die Maske zu erhalten, die diese abgerundeten Formen erzeugt.

Wenn Sie sich erinnern, was wir für den Zickzack gemacht haben, haben wir dieselbe Maske für alle Bilder verwendet, mussten aber dann einen Versatz für die ungeraden Bilder hinzufügen, um eine perfekte Überlappung zu erzielen. In diesem Fall benötigen wir für die ungeraden Bilder eine andere Maske.

Die erste Maske

mask: 
  linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
  radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;

Die zweite

mask:
  radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000) 
  calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))

Die einzige Mühe, die ich mir hier gemacht habe, ist die Aktualisierung der zweiten Maske, um die Lückenvariable (--g) einzubeziehen, um diesen Abstand zwischen den Bildern zu schaffen.

Der letzte Schliff ist die Korrektur des ersten und letzten Bildes. Wie bei allen vorherigen Beispielen benötigt das erste Bild eine gerade linke Kante, während das letzte eine gerade rechte Kante benötigt.

Für das erste Bild kennen wir immer die Maske, die es haben muss, und das ist die folgende

.gallery > img:first-child {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}

Für das letzte Bild hängt es von der Anzahl der Elemente ab, daher spielt es eine Rolle, ob dieses Element :nth-child(odd) oder :nth-child(even) ist.

.gallery > img:last-child:nth-child(even) {
  mask: 
    linear-gradient(to right,#0000 var(--s),#000 0),
    radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}

.gallery > img:last-child:nth-child(odd) {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}

Das ist alles! Drei verschiedene Layouts, aber jedes Mal die gleichen CSS-Tricks

• die Code-Struktur zur Erstellung des Zoom-Effekts
• eine Maske oder clip-path zur Erstellung der Formen
• eine separate Konfiguration für die ungeraden Elemente in einigen Fällen, um eine perfekte Überlappung sicherzustellen
• eine spezifische Konfiguration für das erste und letzte Bild, um die Form nur auf einer Seite zu belassen.

Und hier ist eine große Demo mit allen zusammen. Alles, was Sie tun müssen, ist, eine Klasse hinzuzufügen, um das Layout zu aktivieren, das Sie sehen möchten.

Und hier ist die mit der Flexbox-Implementierung

Zusammenfassung

Uff, wir sind fertig! Ich weiß, es gibt viele CSS-Tricks und Beispiele zwischen diesem Artikel und dem letzten, ganz zu schweigen von all den anderen Tricks, auf die ich hier aus anderen Artikeln verwiesen habe, die ich geschrieben habe. Es hat mich Zeit gekostet, alles zusammenzustellen, und Sie müssen nicht alles auf einmal verstehen. Ein Lesen gibt Ihnen einen guten Überblick über alle Layouts, aber Sie müssen den Artikel möglicherweise mehrmals lesen und sich auf jedes Beispiel konzentrieren, um alle Tricks zu verstehen.

Haben Sie bemerkt, dass wir am HTML überhaupt nichts verändert haben, abgesehen vielleicht von der Anzahl der Bilder im Markup? Alle Layouts, die wir erstellt haben, teilen sich den gleichen HTML-Code, der nichts anderes als eine Liste von Bildern ist.

Bevor ich ende, lasse ich Ihnen noch ein letztes Beispiel da. Es ist ein „Duell“ zwischen zwei Anime-Charakteren mit einem coolen Hover-Effekt.

Was ist mit Ihnen? Können Sie etwas basierend auf dem Gelernten erstellen? Es muss nicht kompliziert sein – stellen Sie sich etwas Cooles oder Lustiges vor, wie ich es mit diesem Anime-Matchup gemacht habe. Es kann eine gute Übung für Sie sein, und wir könnten am Ende eine großartige Sammlung im Kommentarbereich haben.