Oké, dus de laatste keer dat we incheckten, we gebruikten CSS Grid en combineerden ze met CSS clip-path en mask technieken om rasters met mooie vormen te maken.
Hier is slechts een van de fantastische rasters die we samen hebben gemaakt:
Klaar voor de tweede ronde? We werken nog steeds met CSS Grid, clip-path en mask, maar aan het einde van dit artikel zullen we eindigen met verschillende manieren om afbeeldingen op het raster te rangschikken, inclusief enkele rad-hovereffecten die zorgen voor een authentieke, interactieve ervaring om afbeeldingen te bekijken.
En raad eens? We gebruiken de dezelfde opmaak die we de vorige keer gebruikten. Hier is dat nog een keer:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Net als in het vorige artikel hebben we alleen een container nodig met afbeeldingen erin. Niets meer!
Geneste afbeeldingsraster
De vorige keer waren onze rasters, nou ja, typische beeldrasters. Afgezien van de nette vormen waarmee we ze hebben gemaskeerd, waren het vrij standaard symmetrische rasters voor zover we de afbeeldingen erin plaatsten.
Laten we proberen een afbeelding in het midden van het raster te nesten:
We beginnen met het instellen van een 2✕2 raster voor vier afbeeldingen:
.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;
}Nog niets ingewikkelds. De volgende stap is om de hoek van onze afbeeldingen af te snijden om de ruimte voor de geneste afbeelding te creëren. Ik heb al een uitgebreid artikel over hoe hoeken te knippen met behulp van clip-path en mask. Je kunt ook mijn . gebruiken onlinegenerator om de CSS te krijgen voor het maskeren van hoeken.
Wat we hier nodig hebben, is om de hoeken uit te snijden onder een hoek gelijk aan 90deg. We kunnen hetzelfde gebruiken conische-gradiënt techniek uit dat artikel om dat te doen:
.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; }We zouden de kunnen gebruiken clip-path methode om hoeken van hetzelfde artikel te knippen, maar maskeren met verlopen is hier meer geschikt omdat we dezelfde configuratie hebben voor alle afbeeldingen - alles wat we nodig hebben is een rotatie (gedefinieerd met de variabele --_a) het effect krijgen, dus we maskeren van binnenuit in plaats van de buitenranden.
Nu kunnen we de geneste afbeelding in de gemaskeerde ruimte plaatsen. Laten we er eerst voor zorgen dat we een vijfde afbeeldingselement in de HTML hebben:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>We gaan vertrouwen op de goede oude absolute positionering om het daar te plaatsen:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}De inset eigenschap stelt ons in staat om de afbeelding in het midden te plaatsen met een enkele declaratie. We kennen de grootte van de afbeelding (gedefinieerd met de variabele --s), en we weten dat de grootte van de container gelijk is aan 100%. We doen wat wiskunde en de afstand van elke rand moet gelijk zijn aan (100% - var(--s))/2.
Je vraagt je misschien af waarom we gebruiken clip-path helemaal hier. We gebruiken het met de geneste afbeelding om een consistente opening te hebben. Als we het zouden verwijderen, zou je merken dat we niet dezelfde opening tussen alle afbeeldingen hebben. Op deze manier snijden we een klein beetje uit de vijfde afbeelding om de juiste afstand eromheen te krijgen.
Nogmaals de volledige 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));
}Nu vragen velen van jullie zich misschien ook af: waarom al die complexe dingen als we de laatste afbeelding bovenaan kunnen plaatsen en er een rand aan kunnen toevoegen? Dat zou de afbeeldingen onder de geneste afbeelding verbergen zonder een masker, toch?
Dat is waar, en we krijgen het volgende:
Nee maskGeen clip-path. Ja, de code is gemakkelijk te begrijpen, maar er is een klein nadeel: de randkleur moet hetzelfde zijn als de hoofdachtergrond om de illusie perfect te maken. Dit kleine nadeel is genoeg voor mij om de code complexer te maken in ruil voor echte transparantie onafhankelijk van de achtergrond. Ik zeg niet dat een grensaanpak slecht of fout is. Ik zou het aanraden in de meeste gevallen waar de achtergrond bekend is. Maar we zijn hier om nieuwe dingen te ontdekken en, belangrijker nog, componenten te bouwen die niet afhankelijk zijn van hun omgeving.
Laten we deze keer een andere vorm proberen:
Deze keer hebben we van de geneste afbeelding een cirkel gemaakt in plaats van een vierkant. Dat is een gemakkelijke taak met border-radius Maar we moeten een gebruiken cirkelvormige uitsparing voor de andere afbeeldingen. Deze keer zullen we echter vertrouwen op een radial-gradient() in plaats van een conic-gradient() om die mooie ronde look te krijgen.
.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 afbeeldingen gebruiken dezelfde configuratie als het vorige voorbeeld, maar we werken het middelpunt elke keer bij.
De bovenstaande afbeelding illustreert het middelpunt voor elke cirkel. Toch zul je in de eigenlijke code merken dat ik ook rekening houd met de opening om ervoor te zorgen dat alle punten zich op dezelfde positie bevinden (het midden van het raster) om een ononderbroken cirkel te krijgen als we ze combineren.
Nu we onze lay-out hebben, laten we het hebben over het zweefeffect. Voor het geval je het niet gemerkt hebt, een cool hover-effect vergroot de grootte van de geneste afbeelding en past al het andere dienovereenkomstig aan. De grootte vergroten is een relatief gemakkelijke taak, maar het bijwerken van het verloop is ingewikkelder omdat verlopen standaard niet kunnen worden geanimeerd. Om dit te verhelpen, zal ik gebruik maken van een font-size hack om de radiale gradiënt te kunnen animeren.
Als je de code van het verloop controleert, kun je zien dat ik aan het toevoegen ben 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));Het is bekend dat em eenheden zijn relatief ten opzichte van het bovenliggende element font-size, dus het veranderen van de font-size van de .gallery zal ook de berekende em waarde - dit is de truc die we gebruiken. We animeren de font-size vanaf een waarde van 0 naar een bepaalde waarde en als resultaat wordt het verloop geanimeerd, waardoor het uitgesneden deel groter wordt en de grootte van de geneste afbeelding volgt die groter wordt.
Hier is de code die de onderdelen benadrukt die betrokken zijn bij het hover-effect:
.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);
}De font-size truc is handig als we gradiënten of andere eigenschappen willen animeren die niet kunnen worden geanimeerd. Aangepaste eigenschappen gedefinieerd met @property kunnen een dergelijk probleem oplossen, maar ondersteuning ervoor ontbreekt op het moment van schrijven nog.
Ik ontdekte het font-size truc van @SelenIT2 terwijl je probeert op te lossen een uitdaging op Twitter.
Een andere vorm? Laten we gaan!
Deze keer hebben we de geneste afbeelding in de vorm van een ruit geknipt. Ik laat je de code ontleden als een oefening om erachter te komen hoe we hier zijn gekomen. U zult merken dat de structuur hetzelfde is als in onze voorbeelden. De enige verschillen zijn hoe we het verloop gebruiken om de vorm te maken. Duik erin en leer!
Circulair afbeeldingsraster
We kunnen combineren wat we hier en in eerdere artikelen hebben geleerd om een nog spannender beeldraster te maken. Laten we deze keer alle afbeeldingen in ons raster rond maken en, bij de muisaanwijzer, een afbeelding uitbreiden om het hele ding te onthullen terwijl het de rest van de foto's bedekt.
De HTML- en CSS-structuur van het raster is niets nieuws van vroeger, dus laten we dat deel overslaan en ons concentreren op de cirkelvorm en het zweefeffect dat we willen.
We gaan gebruiken clip-path en circle() functie om - je raadt het al! — knip een cirkel uit de afbeeldingen.
Die figuur illustreert de clip-path gebruikt voor de eerste afbeelding. De linkerkant toont de beginstatus van de afbeelding, terwijl de rechterkant de zweefstatus toont. Je kunt gebruiken deze online tool om de . te spelen en te visualiseren clip-path waarden.
Voor de andere afbeeldingen kunnen we het middelpunt van de cirkel bijwerken (70% 70%) om de volgende code te krijgen:
.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%));
}Merk op hoe we de . definiëren clip-path waarden als een terugval van binnen var(). Op deze manier kunnen we de waarde bij zweven gemakkelijker bijwerken door de waarde van de . in te stellen --_c variabel. Tijdens gebruik circle(), de standaardpositie van het middelpunt is 50% 50%, dus we mogen dat weglaten voor meer beknopte code. Daarom zie je dat we alleen aan het instellen zijn 50% in plaats van 50% at 50% 50%.
Vervolgens vergroten we de grootte van onze afbeelding bij de muisaanwijzer tot de totale grootte van het raster, zodat we de andere afbeeldingen kunnen bedekken. Wij zorgen ook voor de z-index heeft een hogere waarde op de zwevende afbeelding, dus het is de bovenste in onze stapelcontext.
.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;
}Wat is er aan de hand met de
place-selfeigendom? Waarom hebben we het nodig en waarom heeft elk beeld een specifieke waarde?
Herinner je je het probleem dat we in het vorige artikel hadden toen? het raster van puzzelstukjes maken? We hebben de afbeeldingen vergroot om een overloop te creëren, maar de overloop van sommige afbeeldingen was onjuist. We hebben ze gerepareerd met behulp van de place-self eigendom.
Hier hetzelfde probleem. We vergroten de grootte van de afbeeldingen, zodat ze allemaal over de rastercellen lopen. Maar als we niets doen, zullen ze allemaal overlopen aan de rechter- en onderkant van het raster. Wat we nodig hebben is:
- de eerste afbeelding die over de rand rechtsonder loopt (het standaardgedrag),
- de tweede afbeelding om de linkeronderrand te overlopen,
- de derde afbeelding om de rechterbovenrand te overlopen, en
- de vierde afbeelding om de linkerbovenrand te overlopen.
Om dat te krijgen, moeten we elke afbeelding correct plaatsen met behulp van de place-self eigendom.
Voor het geval je niet bekend bent met place-self, het is de afkorting voor justify-self en align-self om het element horizontaal en verticaal te plaatsen. Als er één waarde voor nodig is, gebruiken beide uitlijningen dezelfde waarde.
Afbeeldingspanelen uitbreiden
In een vorig artikel, heb ik een cool zoomeffect gemaakt dat van toepassing is op een raster van afbeeldingen waar we alles kunnen regelen: aantal rijen, aantal kolommen, maten, schaalfactor, enz.
Een bijzonder geval waren de klassieke uitzetpanelen, waar we maar één rij en een container over de volle breedte hebben.
We nemen dit voorbeeld en combineren het met vormen!
Voordat we verder gaan, raad ik je ten zeerste aan om mijn ander artikel om te begrijpen hoe de trucs die we gaan behandelen werken. Bekijk dat eens, en we zullen hier doorgaan om ons te concentreren op het maken van de paneelvormen.
Laten we eerst beginnen met het vereenvoudigen van de code en het verwijderen van enkele variabelen
We hebben maar één rij nodig en het aantal kolommen moet worden aangepast op basis van het aantal afbeeldingen. Dat betekent dat we geen variabelen meer nodig hebben voor het aantal rijen (--n) en kolommen (--m ) maar we moeten gebruiken grid-auto-flow: column, waardoor het raster automatisch kolommen kan genereren wanneer we nieuwe afbeeldingen toevoegen. We zullen een vaste hoogte voor onze container overwegen; standaard is deze over de volledige breedte.
Laten we de afbeeldingen in een schuine vorm knippen:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Nogmaals, elke afbeelding bevindt zich in zijn rastercel, dus er is meer ruimte tussen de afbeeldingen dan we zouden willen:
We moeten de breedte van de afbeeldingen vergroten om een overlap te creëren. wij vervangen min-width: 100% Met min-width: calc(100% + var(--s)), Waar --s is een nieuwe variabele die de vorm bepaalt.
Nu moeten we de eerste en laatste afbeeldingen repareren, zodat ze zonder gaten van de pagina afvloeien. Met andere woorden, we kunnen de helling van de linkerkant van de eerste afbeelding en de helling van de rechterkant van de laatste afbeelding verwijderen. We hebben een nieuwe nodig clip-path speciaal voor die twee afbeeldingen.
Ook de overloop moeten we herstellen. Standaard zullen alle afbeeldingen aan beide kanten overlopen, maar voor de eerste hebben we een overloop aan de rechterkant nodig, terwijl we een linker overloop nodig hebben voor de laatste afbeelding.
.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%);
}Het eindresultaat is een mooi uitdijend paneel van schuine afbeeldingen!
We kunnen zoveel afbeeldingen toevoegen als je wilt, en het raster past zich automatisch aan. Bovendien hoeven we maar één waarde te controleren om de vorm te bepalen!
We hadden dezelfde lay-out met flexbox kunnen maken, omdat we te maken hebben met een enkele rij elementen. Hier is mijn implementatie.
Natuurlijk, schuine afbeeldingen zijn cool, maar hoe zit het met een zigzagpatroon? Deze heb ik al geplaagd bij het einde van het laatste artikel.
Alles wat ik hier doe is vervangen clip-path Met mask… en raad eens? Ik heb al een uitgebreid artikel over die zigzagvorm creëren — om nog maar te zwijgen van een online generator om de code te krijgen. Zie je hoe alles samenkomt?
Het lastigste hier is om ervoor te zorgen dat de zigzaglijnen perfect zijn uitgelijnd, en hiervoor moeten we een offset toevoegen voor elke :nth-child(odd) afbeeldingselement.
.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));
}Let op het gebruik van de --_p variabele, die terugvalt op 0% maar zal gelijk zijn aan --_s voor de vreemde beelden.
Hier is een demo die het probleem illustreert. Beweeg de muisaanwijzer om te zien hoe de offset — gedefinieerd door --_p - is de uitlijning aan het herstellen.
Merk ook op hoe we een ander masker gebruiken voor de eerste en laatste afbeelding zoals in het vorige voorbeeld. We hebben alleen een zigzag nodig aan de rechterkant van de eerste afbeelding en de linkerkant van de laatste afbeelding.
En waarom geen afgeronde zijkanten? Laten we het doen!
Ik weet dat de code er misschien eng en moeilijk te begrijpen uitziet, maar het enige wat er aan de hand is, is een combinatie van verschillende trucs die we in dit en andere artikelen die ik al heb gedeeld hebben behandeld. In dit geval gebruik ik dezelfde codestructuur als de zigzag- en de schuine vormen. Vergelijk het met die voorbeelden en je zult geen verschil ontdekken! Dat zijn dezelfde trucs in mijn vorige artikel over het zoomeffect. Dan gebruik ik mijn ander schrijven en mijn online generator om de code te krijgen voor het masker dat die ronde vormen creëert.
Als je je herinnert wat we voor de zigzag deden, hadden we hetzelfde masker voor alle afbeeldingen gebruikt, maar moesten we een offset toevoegen aan de oneven afbeeldingen om een perfecte overlap te creëren. In dit geval hebben we een ander masker nodig voor de oneven genummerde afbeeldingen.
Het eerste masker:
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;
De tweede:
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))
De enige inspanning die ik hier heb gedaan, is het tweede masker bijwerken om de gap-variabele op te nemen (--g) om die ruimte tussen de afbeeldingen te creëren.
De laatste hand is om de eerste en laatste afbeelding te repareren. Net als alle voorgaande voorbeelden heeft de eerste afbeelding een rechte linkerrand nodig, terwijl de laatste een rechte rechterrand nodig heeft.
Voor de eerste afbeelding weten we altijd welk masker het moet hebben, namelijk het volgende:
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
Voor de laatste afbeelding hangt het af van het aantal elementen, dus het maakt uit of dat element is :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))
}Dat is alles! Drie verschillende lay-outs maar elke keer dezelfde CSS-trucs:
- de codestructuur om het zoomeffect te creëren
- een masker of clippad om de vormen te maken
- een aparte configuratie voor de oneven elementen in sommige gevallen om er zeker van te zijn dat we een perfecte overlap hebben
- een specifieke configuratie voor de eerste en laatste afbeelding om de vorm aan slechts één kant te behouden.
En hier is een grote demo met ze allemaal samen. Het enige dat u nodig hebt, is een klas toevoegen om de lay-out te activeren die u wilt zien.
En hier is die met de Flexbox-implementatie
Afsluiten
Oef, we zijn klaar! Ik weet dat er veel CSS-trucs en voorbeelden zijn tussen dit artikel en het laatste, om nog maar te zwijgen van alle andere trucs waarnaar ik hier heb verwezen in andere artikelen die ik heb geschreven. Het kostte me tijd om alles in elkaar te zetten, en je hoeft niet alles tegelijk te begrijpen. Eén keer lezen geeft je een goed overzicht van alle lay-outs, maar het kan zijn dat je het artikel meer dan eens moet lezen en je op elk voorbeeld moet concentreren om alle trucs te begrijpen.
Is het je opgevallen dat we de HTML helemaal niet hebben aangeraakt, behalve misschien het aantal afbeeldingen in de opmaak? Alle lay-outs die we hebben gemaakt, delen dezelfde HTML-code, die niets anders is dan een lijst met afbeeldingen.
Voordat ik eindig, zal ik u nog een laatste voorbeeld geven. Het is een "versus" tussen twee anime-personages met een cool zweefeffect.
En jij dan? Kun je iets creëren op basis van wat je hebt geleerd? Het hoeft niet ingewikkeld te zijn - stel je iets cools of grappigs voor zoals ik deed met die anime-matchup. Het kan een goede oefening voor je zijn, en we kunnen eindigen met een uitstekende verzameling in het commentaargedeelte.
