In een vorig artikel heb ik gekeken naar het vermogen van CSS Grid om: maak complexe lay-outs met behulp van de automatische plaatsingsfuncties. Ik ging nog een stap verder in een ander artikel dat een zoom-zweefeffect toegevoegd aan afbeeldingen in een rasterlay-out. Deze keer wil ik in een ander type raster duiken, een die met vormen werkt.
Zoals, wat als de afbeeldingen niet perfect vierkant zijn, maar in plaats daarvan de vorm hebben van zeshoeken of ruiten? Spoiler alert: we kunnen het. In feite gaan we CSS Grid-technieken combineren die we hebben bekeken en wat CSS toevoegen clip-path en mask magie om mooie rasters met afbeeldingen te maken voor zowat elke vorm die je maar kunt bedenken!
Laten we beginnen met wat opmaak
De meeste lay-outs die we gaan bekijken, lijken op het eerste gezicht misschien gemakkelijk te bereiken, maar het uitdagende deel is om ze te bereiken met dezelfde HTML-opmaak. We kunnen veel wikkels gebruiken, divs, en wat al niet, maar het doel van dit bericht is om dezelfde en de kleinste hoeveelheid HTML-code te gebruiken en toch alle verschillende rasters te krijgen die we willen. Wat is CSS tenslotte anders dan een manier om styling en opmaak te scheiden? Onze styling mag niet afhankelijk zijn van de opmaak en vice versa.
Dit gezegd hebbende, laten we beginnen met dit:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Een container met afbeeldingen is alles wat we hier nodig hebben. Niets meer!
CSS-raster van zeshoeken
Dit wordt ook wel een "honingraat"-raster genoemd.
Er zijn al genoeg andere blogposts die laten zien hoe je dit kunt maken. Heck, ik schreef er een hier op CSS-Tricks! Dat artikel is nog steeds goed en gaat ver in het maken van een responsieve lay-out. Maar voor dit specifieke geval gaan we vertrouwen op een veel eenvoudigere CSS-aanpak.
Laten we eerst gebruiken clip-path op de afbeeldingen om de zeshoekige vorm te creëren en we plaatsen ze allemaal in hetzelfde rastergebied zodat ze elkaar overlappen.
.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%)Nog niets bijzonders. Alle afbeeldingen zijn zeshoeken en boven elkaar. Het lijkt er dus op dat we alleen een enkel zeshoekig beeldelement hebben, maar het zijn er in werkelijkheid zeven.
De volgende stap is het toepassen van een vertaling op de afbeeldingen om ze correct op het raster te plaatsen.
Merk op dat we nog steeds willen dat een van de afbeeldingen in het midden blijft. De rest wordt er omheen geplaatst met behulp van CSS translate en ouderwetse geometrie. Dit zijn de nepformules die ik heb bedacht voor elke afbeelding in het raster:
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))Een paar berekeningen en optimalisatie later (laten we dat saaie gedeelte overslaan, toch?) krijgen we de volgende 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)); }Misschien is dat makkelijker als we er zijn echte trigonometriefuncties in CSS!
Elke afbeelding wordt vertaald door de --_x en --_y variabelen die op die formules zijn gebaseerd. Alleen de tweede afbeelding (nth-child(2)) is niet gedefinieerd in een selector omdat deze in het midden staat. Het kan elke afbeelding zijn als u besluit een andere volgorde te gebruiken. Dit is de volgorde die ik gebruik:
Met slechts een paar regels code krijgen we een cool raster van afbeeldingen. Hieraan heb ik een klein zweefeffect aan de afbeeldingen toegevoegd om de dingen mooier te maken.
Raad eens? We kunnen nog een zeshoekig raster krijgen door eenvoudig een paar waarden bij te werken.
Als je de code controleert en vergelijkt met de vorige, zul je merken dat ik eenvoudig de waarden erin heb verwisseld clip-path en ik schakelde tussen --x en --y. Dat is alles!
CSS-raster van ruiten
Ruit is zo'n mooi woord voor een vierkant dat 45 graden is gedraaid.
Zelfde HTML, weet je nog? We beginnen eerst met het definiëren van een 2×2 raster van afbeeldingen 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;
}Het eerste dat je opvalt, is de grid eigendom. Het wordt vrij ongewoon gebruikt, maar is super handig omdat het een afkorting is waarmee je een compleet raster in één verklaring kunt definiëren. Het is niet de meest intuïtieve - en niet te vergeten leesbare - eigenschap, maar we zijn hier om leren en Onthul Nu nieuwe dingen, dus laten we het gebruiken in plaats van alle individuele rastereigenschappen op te schrijven.
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);Dit definieert twee kolommen gelijk aan de --s variabele en stelt de hoogte van alle rijen in op --s ook. Omdat we vier afbeeldingen hebben, krijgen we automatisch een 2×2 raster.
Hier is een andere manier waarop we het hadden kunnen schrijven:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));...die kan worden verminderd met de grid steno:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Nadat we het raster hebben ingesteld, roteren we het en de afbeeldingen met CSS transforms en we krijgen dit:
Let op hoe ik ze beide roteer door 45deg, maar in de tegenovergestelde richting.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Door de afbeeldingen in de negatieve richting te draaien, wordt voorkomen dat ze meedraaien met het raster, zodat ze recht blijven. Nu passen we een clip-path om er een ruitvorm uit te knippen.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)We zijn bijna klaar! We moeten de grootte van de afbeelding corrigeren om ze bij elkaar te laten passen. Anders staan ze zo ver uit elkaar dat het er niet uitziet als een raster van afbeeldingen.
De afbeelding bevindt zich binnen de grens van de groene cirkel, de ingeschreven cirkel van het rastergebied waar de afbeelding is geplaatst. We willen de afbeelding groter maken zodat deze binnen de rode cirkel past, de omgeschreven cirkel van het rastergebied.
Maak je geen zorgen, ik zal geen saaiere geometrie introduceren. Het enige dat u moet weten, is dat de relatie tussen de straal van elke cirkel de vierkantswortel is van 2 (sqrt(2)). Dit is de waarde die we nodig hebben om de grootte van onze afbeeldingen te vergroten om het gebied te vullen. We zullen gebruiken 100%*sqrt(2) = 141% en klaar!
.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%);
}Net als het hexagon-raster kunnen we dingen mooier maken met dat mooie zoom-hover-effect:
CSS-raster van driehoekige vormen
Je weet waarschijnlijk inmiddels dat de grote truc is om de clip-path om de vormen te krijgen die we willen. Voor dit raster heeft elk element zijn eigen clip-path waarde, terwijl de laatste twee rasters met een consistente vorm werkten. Dus deze keer is het alsof we werken met een paar verschillende driehoekige vormen die samenkomen om een rechthoekig raster van afbeeldingen te vormen.
We plaatsen ze in een 3×2 raster met de volgende 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%); } }Dit is wat we krijgen:
De laatste hand is om de breedte van de middelste kolom gelijk te maken 0 om de spaties tussen de afbeeldingen te verwijderen. Hetzelfde soort afstandsprobleem dat we hadden met het ruitraster, maar met een andere benadering voor de vormen die we gebruiken:
grid-template-columns: auto 0 auto;Ik moest rommelen met de clip-path waarden om ervoor te zorgen dat ze allemaal als een puzzel in elkaar lijken te passen. De originele afbeeldingen overlappen elkaar wanneer de middelste kolom nul breedte heeft, maar na het snijden van de afbeeldingen is de illusie perfect:
CSS Pizza Pie-raster
Raad eens? We kunnen nog een cool raster krijgen door simpelweg toe te voegen border-radius en overflow naar ons raster of driehoekige vormen.
CSS-raster van puzzelstukjes
Deze keer gaan we spelen met de CSS mask eigenschap om de afbeeldingen eruit te laten zien als stukjes van een puzzel.
Als je het nog niet hebt gebruikt mask Met CSS-verlopen, Ik raad ten zeerste aan dit andere artikel Ik schreef over het onderwerp omdat het zal helpen met wat daarna komt. Waarom gradiënten? Want dat is wat we gebruiken om de ronde inkepingen in de puzzelstukjes te krijgen.
Het opzetten van het raster zou nu een makkie moeten zijn, dus laten we ons concentreren op de mask deel.
Zoals geïllustreerd in de bovenstaande demo, hebben we twee verlopen nodig om de uiteindelijke vorm te creëren. Het ene verloop creëert een cirkel (het groene gedeelte) en het andere maakt de juiste curve terwijl het bovenste gedeelte wordt ingevuld.
--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;Twee variabelen bepalen de vorm. De --g variabele is niets anders dan de grid gap. We moeten rekening houden met de opening om onze cirkels correct te plaatsen, zodat ze elkaar perfect overlappen wanneer de hele puzzel in elkaar zit. De --r variabele bepaalt de grootte van ronde delen van de puzzelvorm.
Nu nemen we dezelfde CSS en werken een paar waarden daarin bij om de drie andere vormen te maken:
We hebben de vormen, maar niet de overlappende randen die we nodig hebben om ze in elkaar te laten passen. Elke afbeelding is beperkt tot de rastercel waarin deze zich bevindt, dus het is logisch waarom de vormen op dit moment een beetje door elkaar worden gegooid:
We moeten een overloop creëren door de hoogte/breedte van de afbeeldingen te vergroten. Uit de bovenstaande afbeelding moeten we de hoogte van de eerste en vierde afbeeldingen vergroten, terwijl we de breedte van de tweede en derde vergroten. Je hebt waarschijnlijk al geraden dat we ze moeten vergroten met behulp van de --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));
}We komen dichterbij!
We hebben de overlap gemaakt, maar standaard overlappen onze afbeeldingen ofwel aan de rechterkant (als we de breedte vergroten) of de onderkant (als we de hoogte vergroten). Maar dat is niet wat we willen voor de tweede en vierde afbeelding. De oplossing is om te gebruiken place-self: end op die twee afbeeldingen en onze volledige code wordt dit:
Hier is nog een voorbeeld waarbij ik een conische gradiënt gebruik in plaats van een radiale gradiënt. Dit geeft ons driehoekige puzzelstukjes terwijl we dezelfde onderliggende HTML en CSS behouden.
Een laatste! Deze keer gebruik ik clip-path en aangezien het een eigenschap is die we kunnen animeren, krijgen we een coole hover door simpelweg de aangepaste eigenschap die de vorm bestuurt bij te werken.
Afsluiten
Dat is alles voor dit eerste deel! Door de dingen die we al hebben geleerd over CSS Grid te combineren met wat toegevoegd clip-path en mask magie konden we rasterlay-outs maken met verschillende soorten vormen. En we gebruikten elke keer dezelfde HTML-opmaak! En de opmaak zelf is niets meer dan een container met een handvol afbeeldingselementen!
In het tweede deel gaan we complexere rasters verkennen met meer mooie vormen en zweefeffecten.
Ik ben van plan om de demo te nemen van uitvouwbare beeldpanelen die we samen hebben gemaakt in dit andere artikel:
...en transformeer het in een zigzagbeeldpaneel! En dit is slechts één voorbeeld van de vele die we in het volgende artikel zullen ontdekken.
