Okay, also die Letztes Mal haben wir eingecheckt, haben wir CSS Grid verwendet und sie mit CSS kombiniert clip-path und mask Techniken zum Erstellen von Gittern mit ausgefallenen Formen.
Hier ist nur eines der fantastischen Raster, die wir zusammen erstellt haben:
Bereit für die zweite Runde? Wir arbeiten immer noch mit CSS Grid, clip-path und mask, aber am Ende dieses Artikels werden wir verschiedene Möglichkeiten finden, Bilder auf dem Raster anzuordnen, einschließlich einiger radikaler Hover-Effekte, die für ein authentisches, interaktives Erlebnis beim Betrachten von Bildern sorgen.
Und rate was? Wir verwenden die dasselbe Markup, das wir letztes Mal verwendet haben. Hier ist das nochmal:
<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 mehr!
Verschachteltes Bildraster
Letztes Mal waren unsere Gitter, nun ja, typische Bildgitter. Abgesehen von den ordentlichen Formen, mit denen wir sie maskiert haben, waren es ziemlich symmetrische Standardgitter, was die Positionierung der Bilder im Inneren betrifft.
Versuchen wir, ein Bild in der Mitte des Rasters zu verschachteln:
Wir beginnen damit, ein 2✕2-Raster für vier Bilder festzulegen:
.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 besteht darin, die Ecke unserer Bilder abzuschneiden, um Platz für das verschachtelte Bild zu schaffen. Dazu habe ich bereits einen ausführlichen Artikel wie man Ecken schneidet clip-path und mask. Sie können auch meine verwenden Online-Generator um das CSS zum Maskieren von Ecken zu erhalten.
Was wir hier brauchen, ist, die Ecken in einem Winkel gleich auszuschneiden 90deg. Wir können dasselbe verwenden Conic-Gradient-Technik aus diesem Artikel, 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 gebrauchen clip-path Methode zum Abschneiden von Ecken desselben Artikels, 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 Drehung (definiert mit der Variablen --_a) erhalten den Effekt, also maskieren wir von innen statt von den Außenkanten.
Jetzt können wir das verschachtelte Bild innerhalb des maskierten Bereichs platzieren. Stellen wir zunächst 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 sie dort zu platzieren:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Das inset -Eigenschaft ermöglicht es uns, das Bild mit einer einzigen Deklaration in der Mitte zu platzieren. Wir kennen die Größe des Bildes (definiert mit der Variable --s), und wir wissen, dass die Größe des Containers 100 % entspricht. Wir rechnen etwas, und der Abstand von jeder Kante sollte gleich sein (100% - var(--s))/2.
Sie fragen sich vielleicht, warum wir verwenden clip-path überhaupt hier. Wir verwenden es mit dem verschachtelten Bild, um eine konsistente Lücke zu haben. Wenn wir es entfernen würden, würden Sie feststellen, dass wir nicht die gleiche Lücke zwischen allen Bildern haben. Auf diese Weise schneiden wir ein wenig vom fünften Bild ab, um den richtigen Abstand darum herum zu erhalten.
Nochmal der komplette Code:
.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));
}Viele von Ihnen fragen sich vielleicht auch: Warum all das komplexe Zeug, wenn wir das letzte Bild oben platzieren und einen Rahmen hinzufügen können? Das würde die Bilder unter dem verschachtelten Bild ohne Maske verbergen, richtig?
Das stimmt, und wir erhalten Folgendes:
Nein mask, Kein clip-path. Ja, der Code ist leicht zu verstehen, aber es gibt einen kleinen Nachteil: Die Rahmenfarbe muss mit der des Haupthintergrunds übereinstimmen, um die Illusion perfekt zu machen. Dieses kleine Manko reicht mir aus, um den Code komplexer zu machen im Austausch für echte Transparenz unabhängig vom Hintergrund. Ich sage nicht, dass ein Grenzansatz schlecht oder falsch ist. Ich würde es in den meisten Fällen empfehlen, in denen die Hintergründe bekannt sind. Aber wir sind hier, um neue Dinge zu erforschen und vor allem Komponenten zu bauen, die nicht von ihrer Umgebung abhängig sind.
Versuchen wir es diesmal mit einer anderen Form:
Dieses Mal haben wir das verschachtelte Bild zu einem Kreis statt zu einem Quadrat gemacht. Das ist eine leichte Aufgabe mit border-radius Aber wir müssen a verwenden kreisförmiger Ausschnitt für die anderen Bilder. Diesmal verlassen wir uns jedoch auf a radial-gradient() statt a conic-gradient() um diesen schönen runden Look zu bekommen.
.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 dieselbe Konfiguration wie im vorherigen Beispiel, aber wir aktualisieren jedes Mal den Mittelpunkt.
Die obige Abbildung zeigt den Mittelpunkt für jeden Kreis. Im eigentlichen Code werden Sie jedoch feststellen, dass ich auch die Lücke berücksichtige, um sicherzustellen, dass sich alle Punkte an derselben Position befinden (in der Mitte des Gitters), um einen durchgehenden Kreis zu erhalten, wenn wir sie kombinieren.
Nun, da wir unser Layout haben, lassen Sie uns über den Hover-Effekt sprechen. Falls Sie es nicht bemerkt haben, ein cooler Hover-Effekt vergrößert das verschachtelte Bild und passt alles andere entsprechend an. Das Erhöhen der Größe 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, verwende ich a font-size hacken, um den radialen Farbverlauf animieren zu können.
Wenn Sie den Code des Farbverlaufs überprüfen, können Sie sehen, dass ich hinzufüge 1em:
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 sind relativ zu denen des übergeordneten Elements font-size, also ändern Sie die font-size dauert ebenfalls 3 Jahre. Das erste Jahr ist das sog. .gallery wird auch die berechneten ändern em value – das ist der Trick, den wir verwenden. Wir animieren die font-size ab einem Wert von 0 auf einen bestimmten Wert und als Ergebnis wird der Farbverlauf animiert, wodurch der ausgeschnittene Teil größer wird und der Größe des verschachtelten Bildes folgt, das größer wird.
Hier ist der Code, der die am Hover-Effekt beteiligten Teile hervorhebt:
.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);
}Das font-size trick ist hilfreich, wenn wir Farbverläufe oder andere Eigenschaften animieren möchten, die nicht animiert werden können. Mit @property definierte benutzerdefinierte Eigenschaften können ein solches Problem lösen, aber Unterstützung dafür fehlt bei Redaktionsschluss noch.
Ich habe die entdeckt font-size Trick von @ SelenIT2 beim Versuch zu lösen eine Herausforderung auf Twitter.
Eine andere Form? Lass uns gehen!
Dieses Mal haben wir das verschachtelte Bild in die Form einer Raute geschnitten. Ich lasse Sie den Code als Übung analysieren, um herauszufinden, wie wir hierher gekommen sind. Sie werden feststellen, dass die Struktur dieselbe ist wie in unseren Beispielen. Die einzigen Unterschiede bestehen darin, wie wir den Farbverlauf verwenden, um die Form zu erstellen. Reinschnuppern und lernen!
Kreisförmiges Bildraster
Wir können das, was wir hier und in früheren Artikeln gelernt haben, kombinieren, um ein noch aufregenderes Bildraster zu erstellen. Lassen Sie uns dieses Mal alle Bilder in unserem Raster kreisförmig machen und ein Bild erweitern, um das Ganze zu enthüllen, während es den Rest der Fotos bedeckt.
Die HTML- und CSS-Struktur des Rasters ist nichts Neues von früher, also überspringen wir diesen Teil und konzentrieren uns stattdessen auf die Kreisform und den gewünschten Hover-Effekt.
Wir werden verwenden clip-path und sein circle() funktionieren – Sie haben es erraten! — Schneiden Sie einen Kreis aus den Bildern aus.
Diese Abbildung veranschaulicht die clip-path für das erste Bild verwendet. Die linke Seite zeigt den Anfangszustand des Bildes, während die rechte Seite den schwebenden Zustand zeigt. Sie können verwenden Dieses Online-Tool zu spielen und zu visualisieren clip-path Werte.
Für die anderen Bilder können wir den Mittelpunkt des Kreises aktualisieren (70% 70%), 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 definieren clip-path Werte als Fallback nach innen var(). Auf diese Weise können wir den Wert beim Hover einfacher aktualisieren, indem wir den Wert von festlegen --_c Variable. Beim Benutzen circle(), die Standardposition des Mittelpunkts ist 50% 50%, also können wir das für einen prägnanteren Code weglassen. Deshalb sehen Sie, dass wir nur einstellen 50% statt 50% at 50% 50%.
Dann erhöhen wir die Größe unseres Bildes auf die Gesamtgröße des Rasters, damit wir die anderen Bilder abdecken können. Wir sorgen auch für die z-index hat einen höheren Wert auf dem schwebenden Bild, also ist es das oberste in unserem Stapelkontext.
.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 ist los mit der
place-selfEigentum? Warum brauchen wir es und warum hat jedes Bild einen bestimmten Wert?
Erinnern Sie sich an das Problem, das wir im vorherigen Artikel hatten, als Erstellen des Gitters aus Puzzleteilen? Wir haben die Größe der Bilder erhöht, um einen Überlauf zu erzeugen, aber der Überlauf einiger Bilder war falsch. Wir haben sie mit dem behoben place-self Eigentum.
Dasselbe Problem hier. Wir erhöhen die Größe der Bilder, sodass jedes seine Rasterzellen überfüllt. Aber wenn wir nichts tun, werden sie alle auf der rechten und unteren Seite des Gitters überlaufen. Was wir brauchen ist:
- das erste Bild, das den unteren rechten Rand überläuft (das Standardverhalten),
- das zweite Bild, um den unteren linken Rand zu überlaufen,
- das dritte Bild, um den oberen rechten Rand zu überlaufen, und
- das vierte Bild, um den oberen linken Rand zu überlaufen.
Um das zu erreichen, müssen wir jedes Bild mithilfe von richtig platzieren place-self Eigentum.
Falls Sie nicht vertraut sind place-self, es ist die Abkürzung 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.
Erweitern von Bildfeldern
In einem früheren Artikel, habe ich einen coolen Zoom-Effekt erstellt, der auf ein Raster von Bildern angewendet wird, in dem wir alles steuern können: Anzahl der Zeilen, Anzahl der Spalten, Größen, Skalierungsfaktor usw.
Ein besonderer Fall waren die klassischen Spreizplatten, bei denen wir nur eine Reihe und einen Container in voller Breite haben.
Wir nehmen dieses Beispiel und kombinieren es mit Formen!
Bevor wir fortfahren, empfehle ich dringend, meine zu lesen anderer Artikel um zu verstehen, wie die Tricks funktionieren, die wir gleich behandeln werden. Probieren Sie das aus, und wir werden uns hier weiter auf die Erstellung der Panel-Formen konzentrieren.
Beginnen wir zunächst damit, den Code zu vereinfachen und einige Variablen zu entfernen
Wir brauchen nur eine Zeile und die Anzahl der Spalten sollte sich an die Anzahl der Bilder anpassen. Das heißt, wir brauchen keine Variablen mehr für die Anzahl der Zeilen (--n) und Spalten (--m ), aber wir müssen verwenden grid-auto-flow: column, sodass das Raster automatisch Spalten generiert, wenn wir neue Bilder hinzufügen. Wir werden eine feste Höhe für unseren Container berücksichtigen; Standardmäßig ist es in voller Breite.
Lassen Sie uns die Bilder in eine schräge Form schneiden:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Auch hier ist jedes Bild in seiner Rasterzelle enthalten, sodass zwischen den Bildern mehr Platz ist, als wir möchten:
Wir müssen die Breite der Bilder erhöhen, um eine Überlappung zu erzeugen. Wir ersetzen min-width: 100% mit min-width: calc(100% + var(--s)), Wobei --s ist eine neue Variable, die die Form steuert.
Jetzt müssen wir das erste und letzte Bild korrigieren, damit sie lückenlos von der Seite ablaufen. Mit anderen Worten, wir können die Neigung von der linken Seite des ersten Bildes und die Neigung von der rechten Seite des letzten Bildes entfernen. Wir brauchen eine neue clip-path speziell für diese beiden Bilder.
Wir müssen auch den Überlauf beheben. Standardmäßig werden alle Bilder auf beiden Seiten überlaufen, aber für das erste brauchen wir einen Überlauf auf der rechten Seite, während wir für das letzte Bild einen linken Überlauf brauchen.
.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 Panel mit schrägen Bildern!
Wir können so viele Bilder hinzufügen, wie Sie möchten, und das Raster passt sich automatisch an. Außerdem müssen wir nur einen Wert steuern, um die Form zu steuern!
Wir hätten dasselbe Layout mit Flexbox erstellen können, da wir es mit einer einzelnen Reihe von Elementen zu tun haben. Hier ist meine Umsetzung.
Sicher, schräge Bilder sind cool, aber was ist mit einem Zick-Zack-Muster? Das habe ich schon mal angeteasert Ende des letzten Artikels.
Ich tausche hier nur aus clip-path mit mask… und rate was? Dazu habe ich bereits einen ausführlichen Artikel Erstellen dieser Zick-Zack-Form – ganz zu schweigen von einem Online Generator, um den Code zu erhalten. Sehen Sie, wie alles zusammenkommt?
Der schwierigste Teil hier ist sicherzustellen, dass die Zickzacks perfekt ausgerichtet sind, und dafür müssen wir für jeden einen Versatz hinzufügen :nth-child(odd) Bildelement.
.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 --_p Variable, auf die zurückgegriffen wird 0% wird aber gleich sein --_s für die ungeraden Bilder.
Hier ist eine Demo, die das Problem veranschaulicht. Bewegen Sie den Mauszeiger, um zu sehen, wie der Offset – definiert durch --_p — fixiert die Ausrichtung.
Beachten Sie auch, wie wir für das erste und letzte Bild eine andere Maske verwenden als im vorherigen Beispiel. Wir brauchen nur einen Zickzack 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 beängstigend und schwer verständlich aussehen mag, aber alles, was vor sich geht, ist eine Kombination verschiedener Tricks, die wir in diesem und anderen Artikeln behandelt haben, die ich bereits geteilt habe. In diesem Fall verwende ich die gleiche Codestruktur wie die Zickzack- und die schrägen Formen. Vergleichen Sie es mit diesen Beispielen, und Sie werden keinen Unterschied feststellen! Das sind die gleichen Tricks mein vorheriger Artikel über den Zoom-Effekt. Dann verwende ich meine anderes Schreiben und Mein 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, hatten wir dieselbe Maske für alle Bilder verwendet, mussten dann aber den ungeraden Bildern einen Versatz hinzufügen, um eine perfekte Überlappung zu erzeugen. In diesem Fall benötigen wir für die ungeradzahligen 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;
Der 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 Anstrengung, die ich hier unternommen habe, besteht darin, die zweite Maske so zu aktualisieren, dass sie die Lückenvariable (--g), um diesen Abstand zwischen den Bildern zu erstellen.
Der letzte Schliff besteht darin, das erste und letzte Bild zu fixieren. Wie alle vorherigen Beispiele benötigt das erste Bild einen geraden linken Rand, während das letzte Bild einen geraden rechten Rand benötigt.
Für das erste Bild kennen wir immer die Maske, die es haben muss, und zwar 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 ist es wichtig, ob dieses Element vorhanden ist :nth-child(odd) or :nth-child(even).
.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 Codestruktur, um den Zoom-Effekt zu erzeugen
- eine Maske oder einen Clip-Pfad, um die Formen zu erstellen
- eine separate Konfiguration für die ungeraden Elemente in einigen Fällen, um sicherzustellen, dass wir eine perfekte Überlappung haben
- eine spezifische Konfiguration für das erste und letzte Bild, um die Form nur auf einer Seite beizubehalten.
Und hier ist eine große Demo mit allen zusammen. Sie müssen lediglich eine Klasse hinzufügen, um das gewünschte Layout zu aktivieren.
Und hier ist die mit der Flexbox-Implementierung
Wrapping up
Uff, wir sind fertig! Ich weiß, dass es zwischen diesem Artikel und dem letzten viele CSS-Tricks und Beispiele gibt, ganz zu schweigen von all den anderen Tricks, auf die ich hier aus anderen Artikeln, die ich geschrieben habe, verwiesen habe. Ich brauchte Zeit, um alles zusammenzufügen, und man muss nicht alles auf einmal verstehen. Durch einmaliges Lesen erhalten Sie einen guten Überblick über alle Layouts, aber Sie müssen den Artikel möglicherweise mehr als einmal lesen und sich auf jedes Beispiel konzentrieren, um alle Tricks zu verstehen.
Ist Ihnen aufgefallen, dass wir den HTML-Code außer vielleicht der Anzahl der Bilder im Markup überhaupt nicht berührt haben? Alle Layouts, die wir erstellt haben, haben denselben HTML-Code, der nichts anderes als eine Liste von Bildern ist.
Bevor ich ende, möchte ich Sie mit einem letzten Beispiel verlassen. Es ist ein „Versus“ zwischen zwei Anime-Charakteren mit einem coolen Hover-Effekt.
Was ist mit Ihnen? Kannst du etwas erschaffen, basierend auf dem, was du gelernt hast? Es muss nicht komplex 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önnen mit einer hervorragenden Sammlung im Kommentarbereich enden.
