Bine, deci ultima dată când ne-am cazat, folosim CSS Grid și le combinăm cu CSS clip-path și mask tehnici pentru a crea grile cu forme fanteziste.
Iată doar una dintre grilele fantastice pe care le-am făcut împreună:
Gata pentru turul doi? Încă lucrăm cu CSS Grid, clip-path, și mask, dar până la sfârșitul acestui articol, vom ajunge cu diferite moduri de a aranja imaginile pe grilă, inclusiv unele efecte de hover care fac o experiență autentică, interactivă de vizualizare a imaginilor.
Si ghici ce? Noi folosim același marcaj pe care l-am folosit data trecută. Iată din nou asta:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Ca și articolul anterior, avem nevoie doar de un container cu imagini înăuntru. Nimic mai mult!
Grilă de imagini imbricate
Data trecută, grilele noastre au fost, ei bine, grile de imagini tipice. În afară de formele îngrijite cu care le-am mascat, erau grile simetrice destul de standard în ceea ce privește modul în care am poziționat imaginile în interior.
Să încercăm să imbricați o imagine în centrul grilei:
Începem prin a seta o grilă 2✕2 pentru patru imagini:
.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;
}Nimic complex încă. Următorul pas este să tăiem colțul imaginilor noastre pentru a crea spațiul pentru imaginea imbricată. Am deja un articol detaliat despre cum să tăiați colțurile folosind clip-path și mask. Puteți folosi și my generator online pentru a obține CSS-ul pentru mascarea colțurilor.
Ceea ce avem nevoie aici este să tăiem colțurile la un unghi egal cu 90deg. Putem folosi la fel tehnica conic-gradient din acel articol pentru a face asta:
.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; }Am putea folosi clip-path metoda de tăiere a colțurilor din același articol, dar mascarea cu degrade este mai potrivită aici deoarece avem aceeași configurație pentru toate imaginile - tot ce ne trebuie este o rotație (definită cu variabila --_a) obțineți efectul, așa că mascam din interior în loc de marginile exterioare.
Acum putem plasa imaginea imbricată în spațiul mascat. Mai întâi, să ne asigurăm că avem un al cincilea element de imagine în HTML:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>Ne vom baza pe vechea poziție absolută pentru a o plasa acolo:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
} inset proprietatea ne permite să plasăm imaginea în centru folosind o singură declarație. Cunoaștem dimensiunea imaginii (definită cu variabila --s), și știm că dimensiunea containerului este egală cu 100%. Facem niște calcule, iar distanța de la fiecare margine ar trebui să fie egală cu (100% - var(--s))/2.
S-ar putea să vă întrebați de ce folosim clip-path deloc aici. Îl folosim cu imaginea imbricată pentru a avea un decalaj consistent. Dacă ar fi să-l eliminăm, ați observa că nu avem același decalaj între toate imaginile. În acest fel, tăiem puțin din cea de-a cincea imagine pentru a obține distanța adecvată în jurul ei.
Codul complet din nou:
.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));
}Acum, mulți dintre voi s-ar putea să se întrebe și: de ce toate chestiile complexe când putem plasa ultima imagine în partea de sus și îi putem adăuga un chenar? Asta ar ascunde imaginile de sub imaginea imbricată fără mască, nu?
Este adevărat și vom obține următoarele:
Nu maskLa clip-path. Da, codul este ușor de înțeles, dar există un mic dezavantaj: culoarea marginii trebuie să fie aceeași cu fundalul principal pentru a face iluzia perfectă. Acest mic dezavantaj este suficient pentru a face codul mai complex în schimbul unei transparențe reale, independent de fundal. Nu spun că o abordare a frontierei este proastă sau greșită. Aș recomanda-o în majoritatea cazurilor în care fundalul este cunoscut. Dar suntem aici pentru a explora lucruri noi și, cel mai important, pentru a construi componente care nu depind de mediul lor.
Să încercăm o altă formă de data aceasta:
De data aceasta, am făcut din imaginea imbricată un cerc în loc de un pătrat. Este o sarcină ușoară border-radius Dar trebuie să folosim a decupaj circular pentru celelalte imagini. De data aceasta, însă, ne vom baza pe un radial-gradient() în loc de a conic-gradient() pentru a obține acel aspect frumos rotunjit.
.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); }Toate imaginile folosesc aceeași configurație ca exemplul anterior, dar actualizăm punctul central de fiecare dată.
Figura de mai sus ilustrează punctul central pentru fiecare cerc. Totuși, în codul real, veți observa că țin cont și de decalajul pentru a mă asigura că toate punctele sunt în aceeași poziție (centrul grilei) pentru a obține un cerc continuu dacă le combinăm.
Acum că avem aspectul nostru, să vorbim despre efectul hover. În cazul în care nu ați observat, un efect de hover rece mărește dimensiunea imaginii imbricate și ajustează totul în consecință. Mărirea dimensiunii este o sarcină relativ ușoară, dar actualizarea gradientului este mai complicată, deoarece, implicit, gradienții nu pot fi animați. Pentru a depăși acest lucru, voi folosi a font-size hack pentru a putea anima gradientul radial.
Dacă verificați codul gradientului, puteți vedea că adaug 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));Se știe că em unitățile sunt relative la elementul părinte font-size, deci schimbând font-size a .gallery va schimba, de asemenea, calculat em valoare - acesta este trucul pe care îl folosim. Noi animam font-size dintr-o valoare de 0 la o valoare dată și, ca urmare, gradientul este animat, făcând partea decupată mai mare, urmând dimensiunea imaginii imbricate care devine mai mare.
Iată codul care evidențiază părțile implicate în efectul de hover:
.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);
} font-size truc este util dacă vrem să animem degrade sau alte proprietăți care nu pot fi animate. Proprietățile personalizate definite cu @property pot rezolva o astfel de problemă, dar sprijin pentru aceasta încă lipsește la momentul scrierii.
Am descoperit font-size truc de la @SelenIT2 în timp ce încerca să rezolve o provocare pe Twitter.
O altă formă? Să mergem!
De data aceasta am decupat imaginea imbricată în formă de romb. Vă las să disecați codul ca un exercițiu pentru a afla cum am ajuns aici. Veți observa că structura este aceeași ca în exemplele noastre. Singurele diferențe sunt modul în care folosim gradientul pentru a crea forma. Sapă și învață!
Grilă de imagini circulare
Putem combina ceea ce am învățat aici și în articolele anterioare pentru a face o grilă de imagini și mai interesantă. De data aceasta, să facem toate imaginile din grila noastră circulare și, la trecerea cursorului, să extindem o imagine pentru a dezvălui întregul lucru, deoarece acoperă restul fotografiilor.
Structura HTML și CSS a grilei nu este nimic nou față de înainte, așa că haideți să omitem acea parte și să ne concentrăm în schimb asupra formei circulare și efectului de hover pe care îl dorim.
Vom folosi clip-path şi sa circle() funcția pentru — ați ghicit! — tăiați un cerc din imagini.
Această cifră ilustrează clip-path folosit pentru prima imagine. Partea stângă arată starea inițială a imaginii, în timp ce partea dreaptă arată starea hoverată. Poți să folosești acest instrument online pentru a juca și a vizualiza clip-path valori.
Pentru celelalte imagini, putem actualiza centrul cercului (70% 70%) pentru a obține următorul cod:
.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%));
}Observați cum definim clip-path valorile ca o rezervă în interior var(). Acest mod ne permite să actualizăm mai ușor valoarea la hover prin setarea valorii --_c variabil. Atunci când se utilizează circle(), poziția implicită a punctului central este 50% 50%, așa că putem să o omitem pentru un cod mai concis. De aceea vezi că doar așezăm 50% în loc de 50% at 50% 50%.
Apoi mărim dimensiunea imaginii noastre la trecerea cu mouse-ul la dimensiunea totală a grilei, astfel încât să putem acoperi celelalte imagini. De asemenea, asigurăm z-index are o valoare mai mare pe imaginea plasată cu mouse-ul, deci este cea de sus în noi contextul de stivuire.
.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;
}Ce se întâmplă cu
place-selfproprietate? De ce avem nevoie de el și de ce fiecare imagine are o anumită valoare?
Vă amintiți problema pe care am avut-o în articolul anterior când crearea grilei de piese de puzzle? Am mărit dimensiunea imaginilor pentru a crea un overflow, dar overflow-ul unor imagini a fost incorect. Le-am reparat folosind place-self proprietate.
Aceeași problemă aici. Creștem dimensiunea imaginilor, astfel încât fiecare să-și debordeze celulele grilei. Dar dacă nu facem nimic, toate se vor revărsa în partea dreaptă și inferioară a rețelei. Ceea ce avem nevoie este:
- prima imagine care depășește marginea din dreapta jos (comportamentul implicit),
- a doua imagine să depășească marginea din stânga jos,
- a treia imagine să depășească marginea din dreapta sus și
- a patra imagine care depășește marginea din stânga sus.
Pentru a obține asta, trebuie să plasăm corect fiecare imagine folosind place-self proprietate.
În cazul în care nu sunteți familiarizat cu place-self, este prescurtarea pentru justify-self și align-self pentru a plasa elementul orizontal si vertical. Când ia o singură valoare, ambele aliniamente folosesc aceeași valoare.
Extinderea panourilor de imagine
Într-un articol anterior, am creat un efect de zoom cool care se aplică unei grile de imagini unde putem controla totul: numărul de rânduri, numărul de coloane, dimensiunile, factorul de scară etc.
Un caz special au fost panourile clasice extensibile, unde avem doar un rând și un container cu lățime completă.
Vom lua acest exemplu și îl vom combina cu forme!
Înainte de a continua, vă recomand să citiți alt articol pentru a înțelege cum funcționează trucurile pe care suntem pe cale să le acoperim. Verificați asta și vom continua aici să ne concentrăm pe crearea formelor panoului.
În primul rând, să începem prin a simplifica codul și a elimina unele variabile
Avem nevoie de un singur rând, iar numărul de coloane ar trebui să se ajusteze în funcție de numărul de imagini. Asta înseamnă că nu mai avem nevoie de variabile pentru numărul de rânduri (--n) și coloane (--m ) dar trebuie să folosim grid-auto-flow: column, permițând grilei să genereze automat coloane pe măsură ce adăugăm imagini noi. Vom lua în considerare o înălțime fixă pentru containerul nostru; în mod implicit, va fi lățimea completă.
Să decupăm imaginile într-o formă înclinată:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Încă o dată, fiecare imagine este conținută în celula sa grilă, astfel încât există mai mult spațiu între imagini decât ne-am dori:
Trebuie să creștem lățimea imaginilor pentru a crea o suprapunere. Inlocuim min-width: 100% cu min-width: calc(100% + var(--s)), În cazul în care --s este o nouă variabilă care controlează forma.
Acum trebuie să reparăm prima și ultima imagine, astfel încât acestea să se scurgă de pe pagină fără goluri. Cu alte cuvinte, putem elimina înclinarea din partea stângă a primei imagini și înclinarea din partea dreaptă a ultimei imagini. Avem nevoie de un nou clip-path special pentru acele două imagini.
De asemenea, trebuie să remediem preaplinul. În mod implicit, toate imaginile vor depăși pe ambele părți, dar pentru prima, avem nevoie de un overflow pe partea dreaptă în timp ce avem nevoie de un overflow din stânga pentru ultima imagine.
.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%);
}Rezultatul final este un panou frumos extins de imagini înclinate!
Putem adăuga câte imagini doriți, iar grila se va ajusta automat. În plus, trebuie să controlăm o singură valoare pentru a controla forma!
Am fi putut face același aspect cu flexbox, deoarece avem de-a face cu un singur rând de elemente. Aici este implementarea mea.
Sigur, imaginile înclinate sunt cool, dar ce zici de un model în zig-zag? L-am tachinat deja pe acesta la sfarsitul ultimului articol.
Tot ce fac aici este să înlocuiesc clip-path cu mask… si ghici ce? Am deja un articol detaliat despre creând acea formă de zig-zag — ca să nu mai vorbim de un online generator pentru a obține codul. Vedeți cum totul se îmbină?
Cea mai dificilă parte aici este să ne asigurăm că zig-zag-urile sunt aliniate perfect și, pentru aceasta, trebuie să adăugăm un decalaj pentru fiecare :nth-child(odd) element de imagine.
.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));
}Observați utilizarea lui --_p variabilă, care va reveni la 0% dar va fi egal cu --_s pentru imaginile ciudate.
Iată un demo care ilustrează problema. Plasați cursorul pentru a vedea cum este definită decalajul --_p — fixează alinierea.
De asemenea, observați cum folosim o mască diferită pentru prima și ultima imagine, așa cum am făcut în exemplul anterior. Avem nevoie doar de un zig-zag în partea dreaptă a primei imagini și în partea stângă a ultimei imagini.
Și de ce nu laturile rotunjite? Hai să o facem!
Știu că codul poate părea înfricoșător și greu de înțeles, dar tot ce se întâmplă este o combinație de diferite trucuri pe care le-am acoperit în acest articol și în alte articole pe care le-am împărtășit deja. În acest caz, folosesc aceeași structură de cod ca și formele în zig-zag și înclinate. Comparați-l cu acele exemple și nu veți găsi nicio diferență! Acestea sunt aceleași trucuri articolul meu anterior despre efectul de zoom. Apoi, îmi folosesc alte scrieri și generatorul meu online pentru a obține codul pentru masca care creează acele forme rotunjite.
Dacă vă amintiți ce am făcut pentru zig-zag, am folosit aceeași mască pentru toate imaginile, dar apoi a trebuit să adăugăm un offset la imaginile ciudate pentru a crea o suprapunere perfectă. În acest caz, avem nevoie de o mască diferită pentru imaginile cu numere impare.
Prima masca:
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;
Al doilea:
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))
Singurul efort pe care l-am făcut aici este să actualizez a doua mască pentru a include variabila gap (--g) pentru a crea acel spațiu între imagini.
Atingerea finală este de a repara prima și ultima imagine. Ca toate exemplele anterioare, prima imagine are nevoie de o margine dreaptă dreaptă, în timp ce ultima are nevoie de o margine dreaptă dreaptă.
Pentru prima imagine, știm întotdeauna masca pe care trebuie să o aibă, care este următoarea:
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
Pentru ultima imagine, depinde de numărul de elemente, deci contează dacă acel element este :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))
}Asta e tot! Trei aspecte diferite, dar aceleași trucuri CSS de fiecare dată:
- structura codului pentru a crea efectul de zoom
- o mască sau un clip-path pentru a crea formele
- o configurație separată pentru elementele ciudate în unele cazuri pentru a ne asigura că avem o suprapunere perfectă
- o configurație specifică pentru prima și ultima imagine pentru a păstra forma doar pe o singură parte.
Și iată o demonstrație mare cu toți împreună. Tot ce aveți nevoie este să adăugați o clasă pentru a activa aspectul pe care doriți să îl vedeți.
Și iată-l pe cel cu implementarea Flexbox
La finalul
Uf, am terminat! Știu că există multe trucuri și exemple CSS între acest articol și ultimul, ca să nu mai vorbim de toate celelalte trucuri la care am făcut referire aici din alte articole pe care le-am scris. Mi-a luat timp să pun totul împreună și nu trebuie să înțelegi totul deodată. O singură lectură vă va oferi o imagine de ansamblu bună asupra tuturor aspectelor, dar poate fi necesar să citiți articolul de mai multe ori și să vă concentrați pe fiecare exemplu pentru a înțelege toate trucurile.
Ați observat că nu am atins HTML deloc, în afară de numărul de imagini din marcaj? Toate layout-urile pe care le-am realizat au același cod HTML, care nu este altceva decât o listă de imagini.
Înainte de a încheia, vă voi lăsa cu un ultim exemplu. Este un „versus” între două personaje anime cu un efect de hover cool.
Şi tu? Poți crea ceva pe baza a ceea ce ai învățat? Nu trebuie să fie complex – imaginează-ți ceva mișto sau amuzant, așa cum am făcut cu acea pereche anime. Poate fi un exercițiu bun pentru tine și putem încheia cu o colecție excelentă în secțiunea de comentarii.
