Rendben, szóval a amikor legutóbb bejelentkeztünk, CSS Grid-et használtunk, és kombináltuk őket CSS-sel clip-path és a mask technikák díszes formájú rácsok létrehozására.
Íme csak egy a közösen készített fantasztikus rácsok közül:
Készen állsz a második fordulóra? Még mindig a CSS Griddel dolgozunk, clip-pathés mask, de ennek a cikknek a végére különböző módokon fogunk elrendezni a képeket a rácson, beleértve néhány rad hover effektust, amelyek hiteles, interaktív élményt nyújtanak a képek megtekintéséhez.
És képzeld csak? Használjuk a ugyanaz a jelölés, mint amit legutóbb használtunk. Íme megint:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Az előző cikkhez hasonlóan nekünk is csak egy konténerre van szükségünk képekkel. Semmi több!
Beágyazott képrács
Legutóbb a rácsaink tipikus képrácsok voltak. A szép formáktól eltekintve, amelyekkel maszkíroztuk őket, meglehetősen szabványos szimmetrikus rácsok voltak, amennyire a képeket belül helyeztük el.
Próbáljunk meg egy képet beágyazni a rács közepébe:
Kezdjük egy 2✕2-es rács beállításával négy képhez:
.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;
}Még semmi bonyolult. Következő lépésként levágjuk a képeink sarkát, így létrehozzuk a helyet a beágyazott kép számára. Már van egy részletes cikkem hogyan vágja le a sarkokat a segítségével clip-path és a mask. Az enyémet is használhatod online generátor hogy megkapja a CSS-t a sarkok maszkolásához.
Amire szükségünk van, az az, hogy kivágjuk a sarkokat egyenlő szögben 90deg. Ugyanezt használhatjuk kúp-gradiens technika abból a cikkből, hogy ezt tegye:
.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; }Használhatnánk a clip-path metódus a sarkok vágására ugyanabból a cikkből, de itt a színátmenetekkel való maszkolás megfelelőbb, mert minden képhez ugyanaz a konfiguráció – csak egy elforgatásra van szükség (a változóval definiálva --_a) érje el a hatást, ezért a külső szélek helyett belülről maszkoljuk.
Most elhelyezhetjük a beágyazott képet a maszkolt térben. Először is győződjön meg arról, hogy van egy ötödik képelem a HTML-ben:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>A jó öreg abszolút pozicionálásra fogunk hagyatkozni, hogy elhelyezzük:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}A inset tulajdonság lehetővé teszi, hogy a képet egyetlen deklaráció segítségével a közepére helyezzük. Ismerjük a kép méretét (a változóval definiálva --s), és tudjuk, hogy a tároló mérete 100%. Számolunk, és az egyes élektől való távolságnak egyenlőnek kell lennie (100% - var(--s))/2.
Kíváncsi lehet, miért használjuk clip-path egyáltalán itt. A beágyazott képpel használjuk, hogy következetes rés legyen. Ha eltávolítanánk, észrevenné, hogy nincs egyforma rés az összes kép között. Így az ötödik képből vágunk egy kicsit, hogy megfelelő távolságot kapjunk körülötte.
Ismét a teljes kód:
.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));
}Most sokakban felmerülhet a kérdés: minek ez az összetett dolog, ha az utolsó képet a tetejére helyezhetjük, és szegélyt fűzhetünk hozzá? Ez maszk nélkül elrejti a képeket a beágyazott kép alatt, igaz?
Ez igaz, és a következőket kapjuk:
Nem mask, nem clip-path. Igen, a kód könnyen érthető, de van egy kis hátránya: a szegély színének meg kell egyeznie a fő háttér színével, hogy az illúzió tökéletes legyen. Ez a kis hiányosság nekem elég ahhoz, hogy a kódot összetettebbé tegyem a háttértől független valódi átláthatóságért cserébe. Nem azt mondom, hogy a határokon való megközelítés rossz vagy helytelen. Javasolnám a legtöbb esetben, ahol ismert a háttér. De azért vagyunk itt, hogy új dolgokat fedezzünk fel, és ami a legfontosabb, olyan összetevőket építsünk, amelyek nem függenek a környezettől.
Ezúttal próbáljunk ki egy másik formát:
Ezúttal a beágyazott képet négyzet helyett körré készítettük. Ezzel könnyű feladat border-radius De használnunk kell a kör alakú kivágás a többi képhez. Ezúttal azonban támaszkodunk a radial-gradient() helyett a conic-gradient() hogy megkapja azt a szép lekerekített megjelenést.
.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); }Az összes kép ugyanazt a konfigurációt használja, mint az előző példa, de minden alkalommal frissítjük a középpontot.
A fenti ábra az egyes körök középpontját szemlélteti. Mégis, a tényleges kódban észre fogod venni, hogy a rést is figyelembe veszem, hogy biztosítsam, hogy minden pont ugyanabban a helyzetben legyen (a rács közepén), hogy folytonos kört kapjunk, ha kombináljuk őket.
Most, hogy megvan az elrendezésünk, beszéljünk a lebegő effektusról. Ha nem vette észre, a hűvös lebegési effektus megnöveli a beágyazott kép méretét, és minden mást ennek megfelelően állít be. A méret növelése viszonylag egyszerű feladat, de a színátmenet frissítése bonyolultabb, mivel alapértelmezés szerint a színátmenetek nem animálhatók. Ennek leküzdésére a font-size hack, hogy képes legyen animálni a radiális gradienst.
Ha ellenőrzi a színátmenet kódját, láthatja, hogy hozzáadom 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));Ez köztudott em az egységek a szülőelemhez viszonyítva vannak font-size, így megváltoztatva a font-size az .gallery a számított értéket is megváltoztatja em érték – ezt a trükköt használjuk. Animáljuk a font-size értékétől 0 adott értékre, és ennek eredményeként a színátmenet animációra kerül, így a kivágott rész nagyobb lesz, követve az egyre nagyobb beágyazott kép méretét.
Íme a kód, amely kiemeli a lebegő effektusban részt vevő részeket:
.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);
}A font-size trükk akkor hasznos, ha színátmeneteket vagy más, nem animálható tulajdonságokat szeretnénk animálni. A @property-vel definiált egyéni tulajdonságok megoldhatják az ilyen problémát, de támogatást hozzá az írás idején még hiányzik.
Felfedeztem a font-size trükk tőle @SelenIT2 miközben próbálja megoldani kihívás a Twitteren.
Egy másik forma? Gyerünk!
A beágyazott képet ezúttal rombusz alakúra vágtuk. Hagyom, hogy gyakorlatként boncolgassa a kódot, hogy rájöjjön, hogyan jutottunk el idáig. Észre fogja venni, hogy a szerkezet ugyanaz, mint a példáinkban. Az egyetlen különbség az, hogy hogyan használjuk a színátmenetet az alakzat létrehozásához. Vágj bele és tanulj!
Kör alakú képrács
Az itt és a korábbi cikkekben tanultakat kombinálva még izgalmasabb képrácsot készíthetünk. Ezúttal tegyük kör alakúra a rácsunk összes képét, és az egérmutatót húzva bontsuk ki a képet, hogy az egészet felfedje, ahogy a többi fotót is lefedi.
A rács HTML- és CSS-struktúrája nem újdonság a korábbiakhoz képest, ezért hagyjuk ki ezt a részt, és inkább a kívánt kör alakúra és lebegtetési effektusra koncentráljunk.
Használni fogjuk clip-path és circle() funkciót – kitaláltad! — vágott ki egy kört a képekből.
Ez az ábra szemlélteti a clip-path az első képhez használt. A bal oldalon a kép kezdeti állapota látható, míg a jobb oldalon a lebegtetett állapot látható. Te tudod használni ez az online eszköz játszani és vizualizálni a clip-path értékeket.
A többi képnél frissíthetjük a kör közepét (70% 70%), hogy megkapja a következő kódot:
.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%));
}Figyeljük meg, hogyan definiáljuk a clip-path értékeket belüli tartalékként var(). Ezzel a módszerrel könnyebben frissíthetjük az értéket a lebegtetéskor az érték beállításával --_c változó. Használat során circle(), a középpont alapértelmezett pozíciója 50% 50%, ezért ezt kihagyjuk a tömörebb kód érdekében. Ezért látja, hogy csak beállítást végezünk 50% helyett 50% at 50% 50%.
Ezután növeljük a képünk méretét az egérrel a rács teljes méretére, hogy lefedhessük a többi képet. Biztosítjuk továbbá a z-index magasabb értéke van a lebegtetett képen, így nálunk ez a legjobb kontextus halmozása.
.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;
}Mi történik a
place-selfingatlan? Miért van szükségünk rá, és miért van minden képnek sajátos értéke?
Emlékszel arra a problémára, amikor az előző cikkben voltunk a kirakós darabokból álló rács létrehozása? Megnöveltük a képek méretét, hogy túlcsordulást hozzunk létre, de néhány kép túlcsordulása helytelen volt. A segítségével javítottuk őket place-self ingatlan.
Ugyanez a probléma itt. Növeljük a képek méretét, így mindegyik túlcsordul a rácscellákon. De ha nem teszünk semmit, mindegyik túlcsordul a rács jobb és alsó oldalán. Amire szükségünk van:
- az első kép, amely túlcsordul a jobb alsó szélen (az alapértelmezett viselkedés),
- a második kép a bal alsó szél túlcsordulásához,
- a harmadik kép, amely túlcsordítja a jobb felső élt, és
- a negyedik kép, hogy túlcsorduljon a bal felső szélen.
Ennek eléréséhez minden képet helyesen kell elhelyeznünk a place-self ingatlan.
Abban az esetben, ha nem ismeri place-self, ez a rövidítése justify-self és a align-self az elem vízszintes és függőleges elhelyezéséhez. Ha egy értéket vesz fel, mindkét igazítás ugyanazt az értéket használja.
Képpanelek kibontása
Egy előző cikkben, Létrehoztam egy klassz zoom effektust, ami a képek rácsára vonatkozik, ahol mindent szabályozhatunk: sorok számát, oszlopok számát, méreteket, léptéktényezőt stb.
Különleges eset volt a klasszikus táguló panelek, ahol csak egy sor és egy teljes szélességű konténer van.
Ezt a példát vesszük, és formákkal kombináljuk!
Mielőtt folytatnánk, nagyon ajánlom, hogy olvassa el az írásomat másik cikk hogy megértsük, hogyan működnek azok a trükkök, amelyekre most készülünk. Nézze meg ezt, és továbbra is a panelformák létrehozására összpontosítunk.
Először is kezdjük a kód egyszerűsítésével és néhány változó eltávolításával
Csak egy sorra van szükségünk, és az oszlopok számát a képek száma alapján kell beállítani. Ez azt jelenti, hogy már nincs szükségünk változókra a sorok számához (--n) és oszlopok (--m ), de használnunk kell grid-auto-flow: column, amely lehetővé teszi a rács számára, hogy automatikusan generáljon oszlopokat, amikor új képeket adunk hozzá. Megfontoljuk a konténerünk rögzített magasságát; alapértelmezés szerint teljes szélességű lesz.
Vágjuk a képeket ferde formára:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Ismét minden kép a rácscellában található, így több hely marad a képek között, mint szeretnénk:
Növelnünk kell a képek szélességét, hogy átfedést hozzunk létre. Cseréljük min-width: 100% val vel min-width: calc(100% + var(--s)), Ahol --s egy új változó, amely szabályozza az alakzatot.
Most meg kell javítanunk az első és az utolsó képet, hogy azok hézagok nélkül lehessenek az oldalról. Vagyis az első kép bal oldaláról eltávolíthatjuk a ferdeséget, az utolsó kép jobb oldaláról pedig a ferdeséget. Kell egy új clip-path kifejezetten erre a két képre.
A túlcsordulást is orvosolnunk kell. Alapértelmezés szerint az összes kép mindkét oldalon túlcsordul, de az elsőnél a jobb oldalon, míg az utolsó képnél bal oldali túlcsordulásra van szükség.
.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%);
}A végeredmény egy szépen bővülő, ferde képekből álló panel!
Annyi képet adhatunk hozzá, amennyit csak akar, és a rács automatikusan beáll. Ráadásul csak egy értéket kell vezérelnünk az alakzat vezérléséhez!
Ugyanezt az elrendezést elkészíthettük volna flexbox-szal is, mivel egyetlen sor elemmel van dolgunk. Itt van az én megvalósításomat.
Persze a ferde képek menők, de mi a helyzet a cikk-cakk mintával? Ezzel már ugrattam az utolsó cikk vége.
Én itt csak cserét csinálok clip-path val vel mask… és képzeld csak? Már van egy részletes cikkem létrehozva azt a cikk-cakk formát - az online-ról nem is beszélve generátor a kód lekéréséhez. Látod, hogyan jön össze minden?
A legbonyolultabb itt az, hogy megbizonyosodjunk arról, hogy a cikk-cakk tökéletesen igazodik-e, és ehhez minden esetben hozzá kell adnunk egy eltolást :nth-child(odd) képelem.
.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));
}Vegye figyelembe a használatát --_p változó, amely vissza fog esni 0% de egyenlő lesz --_s a furcsa képekért.
Itt van egy demó, amely bemutatja a problémát. Mutasson rá az egérrel, hogy megtekinthesse, hogy az eltolás hogyan határozza meg --_p — rögzíti az igazítást.
Figyelje meg azt is, hogyan használunk más maszkot az első és az utolsó képhez, mint az előző példában. Csak az első kép jobb oldalára, az utolsó kép bal oldalára kell csak egy cikk-cakk.
És miért nem lekerekített oldalak? Csináljuk!
Tudom, hogy a kód ijesztőnek és nehezen érthetőnek tűnhet, de ez csak különböző trükkök kombinációja, amelyeket ebben és más, már megosztott cikkekben tárgyaltunk. Ebben az esetben ugyanazt a kódstruktúrát használom, mint a cikk-cakk és a ferde formák. Hasonlítsa össze ezekkel a példákkal, és nem fog különbséget találni! Ugyanazok a trükkök előző cikkem a zoom effektusról. Akkor én használom a sajátomat egyéb írás és a az online generátorom hogy megkapja a lekerekített alakzatokat létrehozó maszk kódját.
Ha emlékszel arra, hogy mit csináltunk a cikk-cakknál, ugyanazt a maszkot használtuk az összes képhez, de aztán eltolást kellett hozzáadnunk a páratlan képekhez, hogy tökéletes átfedést hozzunk létre. Ebben az esetben más maszkra van szükségünk a páratlan számú képekhez.
Az első maszk:
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;
A második:
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))
Az egyetlen erőfeszítés, amit itt tettem, az az volt, hogy frissítettem a második maszkot, hogy tartalmazza a hézag változót (--g), hogy helyet hozzon létre a képek között.
Az utolsó simítás az első és az utolsó kép rögzítése. Mint az összes előző példában, az első képnek egyenes bal, míg az utolsó képnek egyenes jobb szélre van szüksége.
Az első képnél mindig tudjuk, hogy milyen maszkra van szükség, ami a következő:
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
Az utolsó képnél ez az elemek számától függ, tehát számít, hogy az az elem :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))
}Ez minden! Három különböző elrendezés, de minden alkalommal ugyanazok a CSS-trükkök:
- a kódstruktúra a zoom effektus létrehozásához
- maszk vagy klip-útvonal az alakzatok létrehozásához
- bizonyos esetekben külön konfiguráció a páratlan elemekhez, hogy biztosítsuk a tökéletes átfedést
- egy speciális konfiguráció az első és az utolsó képhez, hogy az alak csak az egyik oldalon maradjon.
És itt van egy nagy bemutató, mindegyikkel együtt. Csak egy osztályt kell hozzáadnia a látni kívánt elrendezés aktiválásához.
És itt van a Flexbox megvalósítással
Csomagolta
Hoppá, végeztünk! Tudom, hogy sok CSS-trükk és példa van e cikk és az előző között, nem is beszélve az összes többi trükkről, amelyekre itt hivatkoztam más, általam írt cikkekből. Időbe telt, mire mindent összeraktam, és nem kell mindent egyszerre érteni. Egyetlen olvasmány jó áttekintést ad az összes elrendezésről, de előfordulhat, hogy többször is el kell olvasnia a cikket, és az egyes példákra kell összpontosítania, hogy megértse az összes trükköt.
Észrevette, hogy egyáltalán nem érintettük a HTML-t, kivéve talán a képek számát a jelölésben? Az általunk készített összes elrendezés ugyanazt a HTML-kódot használja, ami nem más, mint a képek listája.
Mielőtt befejezném, egy utolsó példát hagyok Önöknek. Ez egy „versus” két anime karakter között, hűvös lebegéssel.
Mi van veled? Tudsz valamit alkotni a tanultak alapján? Nem kell bonyolultnak lennie – képzelj el valami klassz vagy vicceset, mint ahogy én tettem azzal az anime párosítással. Jó gyakorlat lehet számodra, és a megjegyzés rovatban egy remek kollekcióval zárhatunk.
