In einem früheren Artikel habe ich mir die Fähigkeit von CSS Grid angesehen Erstellen Sie komplexe Layouts mit den Funktionen zur automatischen Platzierung. Ich bin in einem anderen Artikel noch einen Schritt weiter gegangen Bildern in einem Rasterlayout wurde ein Zoom-Hover-Effekt hinzugefügt. Dieses Mal möchte ich in eine andere Art von Raster eintauchen, eines, das mit Formen arbeitet.
Was ist, wenn die Bilder nicht perfekt quadratisch sind, sondern wie Sechsecke oder Rauten geformt sind? Spoiler-Alarm: Wir schaffen das. Tatsächlich werden wir CSS-Grid-Techniken, die wir uns angesehen haben, kombinieren und etwas CSS einfügen clip-path und mask Magie, um ausgefallene Bilderraster für fast jede Form zu erstellen, die Sie sich vorstellen können!
Beginnen wir mit etwas Markup
Die meisten Layouts, die wir uns ansehen werden, mögen auf den ersten Blick einfach erscheinen, aber die Herausforderung besteht darin, sie zu erreichen das gleiche HTML-Markup. Wir können viele Wrapper verwenden, divs und so weiter, aber das Ziel dieses Posts ist es, die gleiche und die kleinste Menge an HTML-Code zu verwenden und trotzdem all die verschiedenen Raster zu erhalten, die wir wollen. Was ist CSS schließlich anderes als eine Möglichkeit, Styling und Markup zu trennen? Unser Styling sollte nicht vom Markup abhängen und umgekehrt.
Dies gesagt, fangen wir damit an:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Ein Container mit Bildern ist alles, was wir hier brauchen. Nichts mehr!
CSS-Raster aus Sechsecken
Dies wird manchmal auch als „Waben“-Gitter bezeichnet.
Es gibt bereits viele andere Blogbeiträge, die zeigen, wie man das macht. Verdammt, ich schrieb eins hier auf CSS-Tricks! Dieser Artikel ist immer noch gut und geht sehr tief in die Erstellung eines ansprechenden Layouts. Aber für diesen speziellen Fall werden wir uns auf einen viel einfacheren CSS-Ansatz verlassen.
Lassen Sie uns zuerst verwenden clip-path auf den Bildern, um die Sechseckform zu erstellen, und wir platzieren sie alle im selben Rasterbereich, sodass sie sich überlappen.
.gallery {
--s: 150px; /* controls the size */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%)Noch nichts Besonderes. Alle Bilder sind Sechsecke und übereinander. Es sieht also so aus, als hätten wir nur ein einziges sechseckiges Bildelement, aber in Wirklichkeit sind es sieben.
Der nächste Schritt besteht darin, eine Übersetzung auf die Bilder anzuwenden, um sie korrekt im Raster zu platzieren.
Beachten Sie, dass eines der Bilder immer noch in der Mitte bleiben soll. Der Rest wird per CSS drumherum platziert translate und gute altmodische Geometrie. Hier sind die Scheinformeln, die ich mir für jedes Bild im Raster ausgedacht habe:
translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))Ein paar Berechnungen und Optimierungen später (überspringen wir diesen langweiligen Teil, oder?) erhalten wir das folgende CSS:
.gallery {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5),
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }Vielleicht wird das einfacher, wenn wir kommen echte Trigonometriefunktionen in CSS!
Jedes Bild wird von der übersetzt --_x und --_y Variablen, die auf diesen Formeln basieren. Nur das zweite Bild (nth-child(2)) ist in keinem Selektor undefiniert, weil es der in der Mitte ist. Es kann ein beliebiges Bild sein, wenn Sie sich für eine andere Reihenfolge entscheiden. Hier ist die Reihenfolge, die ich verwende:
Mit nur wenigen Codezeilen erhalten wir ein cooles Bildraster. Dazu habe ich den Bildern einen kleinen Hover-Effekt hinzugefügt, um die Dinge schicker zu machen.
Erraten Sie, was? Wir können ein weiteres Sechseckgitter erhalten, indem wir einfach ein paar Werte aktualisieren.
Wenn Sie den Code überprüfen und mit dem vorherigen vergleichen, werden Sie feststellen, dass ich einfach die Werte darin vertauscht habe clip-path und ich wechselte zwischen --x und --y. Das ist alles!
CSS-Rautenraster
Raute ist so ein schickes Wort für ein Quadrat, das um 45 Grad gedreht ist.
Gleiches HTML, erinnerst du dich? Wir beginnen zunächst mit der Definition eines 2×2-Rasters von Bildern in CSS:
.gallery {
--s: 150px; /* controls the size */
display: grid;
gap: 10px;
grid: auto-flow var(--s) / repeat(2, var(--s));
place-items: center;
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}Das erste, was Ihnen ins Auge fallen könnte, ist die grid Eigentum. Es wird ziemlich selten verwendet, ist aber sehr hilfreich, da es eine Abkürzung ist, mit der Sie ein vollständiges Raster in einer Deklaration definieren können. Es ist nicht die intuitivste – und ganz zu schweigen von der lesbarsten – Eigenschaft, aber wir sind hier in Verbindung, um und entdeckt, neue Dinge, also verwenden wir es, anstatt alle einzelnen Grid-Eigenschaften aufzuschreiben.
grid: auto-flow var(--s) / repeat(2,var(--s));
/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);Dies definiert zwei Spalten gleich dem --s Variable und setzt die Höhe aller Zeilen auf --s auch. Da wir vier Bilder haben, erhalten wir automatisch ein 2×2-Raster.
Hier ist eine andere Möglichkeit, wie wir es hätten schreiben können:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…die mit reduziert werden können grid Kurzschrift:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Nachdem wir das Raster eingestellt haben, drehen wir es und die Bilder mit CSS transforms und wir bekommen das:
Beachten Sie, wie ich sie beide drehe 45deg, aber in die entgegengesetzte Richtung.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Das Drehen der Bilder in die negative Richtung verhindert, dass sie mit dem Raster gedreht werden, sodass sie gerade bleiben. Nun wenden wir a an clip-path um eine Rautenform aus ihnen herauszuschneiden.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Wir sind fast fertig! Wir müssen die Größe des Bildes korrigieren, damit sie zusammenpassen. Andernfalls sind sie so weit voneinander entfernt, dass es nicht mehr wie ein Bildraster aussieht.
Das Bild befindet sich innerhalb der Grenze des grünen Kreises, der der eingeschriebene Kreis des Rasterbereichs ist, in dem das Bild platziert ist. Was wir wollen, ist, das Bild zu vergrößern, damit es in den roten Kreis passt, der der umschriebene Kreis des Rasterbereichs ist.
Keine Sorge, ich werde keine langweilige Geometrie mehr einführen. Alles, was Sie wissen müssen, ist, dass die Beziehung zwischen dem Radius jedes Kreises die Quadratwurzel von 2 (sqrt(2)). Dies ist der Wert, den wir benötigen, um die Größe unserer Bilder zu erhöhen, um den Bereich auszufüllen. Wir werden verwenden 100%*sqrt(2) = 141% und fertig!
.gallery {
--s: 150px; /* control the size */
display: grid;
grid: auto-flow var(--s) / repeat(2,var(--s));
gap: 10px;
place-items: center;
transform: rotate(45deg);
}
.gallery > img {
width: 141%; /* 100%*sqrt(2) = 141% */
aspect-ratio: 1;
object-fit: cover;
transform: rotate(-45deg);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}Wie beim Hexagon-Gitter können wir die Dinge mit diesem netten Zoom-Hover-Effekt schicker machen:
CSS-Gitter aus dreieckigen Formen
Sie wissen wahrscheinlich inzwischen, dass der große Trick darin besteht, das herauszufinden clip-path um die gewünschten Formen zu erhalten. Für dieses Raster hat jedes Element sein eigenes clip-path Wert, während die letzten beiden Gitter mit einer einheitlichen Form gearbeitet haben. Diesmal ist es also so, als würden wir mit ein paar verschiedenen dreieckigen Formen arbeiten, die sich zu einem rechteckigen Bildraster zusammenfügen.
Wir platzieren sie in einem 3×2-Raster mit dem folgenden CSS:
.gallery {
display: grid;
gap: 10px;
grid-template-columns: auto auto auto; /* 3 columns */
place-items: center;
}
.gallery > img {
width: 200px; /* controls the size */
aspect-ratio: 1;
object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }Hier ist, was wir bekommen:
Der letzte Schliff besteht darin, die Breite der mittleren Spalte gleich zu machen 0 um die Leerzeichen zwischen den Bildern zu entfernen. Die gleiche Art von Abstandsproblem hatten wir mit dem Rautengitter, aber mit einem anderen Ansatz für die Formen, die wir verwenden:
grid-template-columns: auto 0 auto;Ich musste mit dem herumfummeln clip-path Werte, um sicherzustellen, dass sie alle gut zusammenpassen wie ein Puzzle. Die Originalbilder überlappen sich, wenn die mittlere Spalte keine Breite hat, aber nach dem Aufteilen der Bilder ist die Illusion perfekt:
CSS-Pizza-Kuchen-Gitter
Erraten Sie, was? Wir können ein weiteres cooles Gitter erhalten, indem wir einfach hinzufügen border-radius und overflow zu unseren Gitter- oder Dreiecksformen. 🎉
CSS-Raster aus Puzzleteilen
Dieses Mal werden wir mit dem CSS spielen mask -Eigenschaft, um die Bilder wie Teile eines Puzzles aussehen zu lassen.
Wenn Sie nicht benutzt haben mask mit CSS-Verläufe, Ich empfehle sehr dieser andere Artikel Ich habe zu dem Thema geschrieben, weil es bei dem, was als nächstes kommt, helfen wird. Warum Steigungen? Denn das verwenden wir, um die runden Kerben in den Formen der Puzzleteile zu erhalten.
Das Einrichten des Rasters sollte jetzt ein Kinderspiel sein, also konzentrieren wir uns stattdessen auf das mask Teil.
Wie in der obigen Demo veranschaulicht, benötigen wir zwei Farbverläufe, um die endgültige Form zu erstellen. Ein Verlauf erzeugt einen Kreis (den grünen Teil) und der andere erzeugt die rechte Kurve, während er den oberen Teil ausfüllt.
--g: 6px; /* controls the gap */
--r: 42px; /* control the circular shapes */
background:
radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
top/100% calc(100% - var(--r)) no-repeat;Zwei Variablen steuern die Form. Das --g Variable ist nichts als die Gitterlücke. Wir müssen die Lücke berücksichtigen, um unsere Kreise richtig zu platzieren, damit sie sich perfekt überlappen, wenn das gesamte Puzzle zusammengesetzt ist. Das --r Die Variable steuert die Größe der kreisförmigen Teile der Puzzleform.
Jetzt nehmen wir dasselbe CSS und aktualisieren einige Werte darin, um die drei anderen Formen zu erstellen:
Wir haben die Formen, aber nicht die überlappenden Kanten, die wir brauchen, damit sie zusammenpassen. Jedes Bild ist auf die Rasterzelle beschränkt, in der es sich befindet, daher ist es sinnvoll, warum die Formen im Moment irgendwie durcheinander sind:
Wir müssen einen Überlauf erzeugen, indem wir die Höhe/Breite der Bilder erhöhen. Aus der obigen Abbildung müssen wir die Höhe des ersten und vierten Bildes erhöhen, während wir die Breite des zweiten und dritten Bildes erhöhen. Sie haben wahrscheinlich schon erraten, dass wir sie mit erhöhen müssen --r variabel.
.gallery > img:is(:nth-child(1),:nth-child(4)) {
width: 100%;
height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
height: 100%;
width: calc(100% + var(--r));
}Wir kommen näher!
Wir haben die Überlappung erstellt, aber standardmäßig überlappen sich unsere Bilder entweder rechts (wenn wir die Breite erhöhen) oder unten (wenn wir die Höhe erhöhen). Aber das wollen wir für das zweite und vierte Bild nicht. Die Lösung ist zu verwenden place-self: end auf diesen beiden Bildern und unser vollständiger Code wird zu diesem:
Hier ist ein weiteres Beispiel, bei dem ich einen konischen Farbverlauf anstelle eines radialen Farbverlaufs verwende. Dies gibt uns dreieckige Puzzleteile, während wir das gleiche zugrunde liegende HTML und CSS beibehalten.
Ein letztes! Diesmal verwende ich clip-path und da es sich um eine Eigenschaft handelt, die wir animieren können, erhalten wir einen coolen Hover, indem wir einfach die benutzerdefinierte Eigenschaft aktualisieren, die die Form steuert.
Wrapping up
Das ist alles für diesen ersten Teil! Indem wir die Dinge, die wir bereits über CSS Grid gelernt haben, mit einigen zusätzlichen kombinieren clip-path und mask Magie konnten wir Rasterlayouts mit verschiedenen Arten von Formen erstellen. Und wir haben jedes Mal dasselbe HTML-Markup verwendet! Und das Markup selbst ist nichts anderes als ein Container mit einer Handvoll Bildelementen!
Im zweiten Teil werden wir komplexer aussehende Gitter mit ausgefalleneren Formen und Hover-Effekten untersuchen.
Ich habe vor, die Demo von Expanding Image Panels zu nehmen, die wir zusammen erstellt haben dieser andere Artikel:
…und verwandeln Sie es in eine Zick-Zack-Bildtafel! Und dies ist nur ein Beispiel unter vielen, die wir im nächsten Artikel entdecken werden.
