Va bene, quindi il l'ultima volta che ci siamo registrati, stavamo usando CSS Grid e combinandoli con CSS clip-path ed mask tecniche per creare griglie con forme fantasiose.
Ecco solo una delle fantastiche griglie che abbiamo realizzato insieme:
Pronti per il secondo round? Stiamo ancora lavorando con CSS Grid, clip-pathe mask, ma alla fine di questo articolo avremo diversi modi per disporre le immagini sulla griglia, inclusi alcuni effetti al passaggio del mouse che rendono l'esperienza interattiva autentica per visualizzare le immagini.
E indovina cosa? Stiamo usando il stesso markup che abbiamo usato l'ultima volta. Eccolo di nuovo:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Come nell'articolo precedente, abbiamo solo bisogno di un contenitore con le immagini all'interno. Niente di più!
Griglia di immagini nidificate
L'ultima volta, le nostre griglie erano, beh, tipiche griglie di immagini. A parte le forme pulite con cui le abbiamo mascherate, erano griglie simmetriche piuttosto standard per quanto riguarda il posizionamento delle immagini all'interno.
Proviamo a annidare un'immagine al centro della griglia:
Iniziamo impostando una griglia 2✕2 per quattro immagini:
.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;
}Niente di complesso ancora. Il prossimo passo è tagliare l'angolo delle nostre immagini per creare lo spazio per l'immagine nidificata. Ho già un articolo dettagliato su come tagliare gli angoli usando clip-path ed mask. Puoi anche usare my generatore online per ottenere il CSS per mascherare gli angoli.
Quello di cui abbiamo bisogno qui è ritagliare gli angoli con un angolo uguale a 90deg. Possiamo usare lo stesso tecnica del gradiente conico da quell'articolo per farlo:
.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; }Potremmo usare il clip-path metodo per tagliare gli angoli dallo stesso articolo, ma qui la mascheratura con gradienti è più adatta perché abbiamo la stessa configurazione per tutte le immagini: tutto ciò di cui abbiamo bisogno è una rotazione (definita con la variabile --_a) ottenere l'effetto, quindi stiamo mascherando dall'interno anziché dai bordi esterni.
Ora possiamo posizionare l'immagine nidificata all'interno dello spazio mascherato. Innanzitutto, assicuriamoci di avere un quinto elemento immagine nell'HTML:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>Faremo affidamento sul buon vecchio posizionamento assoluto per inserirlo lì:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}I inset La proprietà ci consente di posizionare l'immagine al centro utilizzando un'unica dichiarazione. Conosciamo la dimensione dell'immagine (definita con la variabile --s), e sappiamo che la dimensione del contenitore è pari al 100%. Facciamo un po' di matematica e la distanza da ciascun bordo dovrebbe essere uguale a (100% - var(--s))/2.
Ti starai chiedendo perché stiamo usando clip-path affatto qui. Lo stiamo usando con l'immagine nidificata per avere uno spazio vuoto coerente. Se dovessimo rimuoverlo, noteresti che non abbiamo lo stesso spazio tra tutte le immagini. In questo modo, stiamo tagliando un po' dalla quinta immagine per ottenere la giusta spaziatura attorno ad essa.
Il codice completo di nuovo:
.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));
}Ora, molti di voi potrebbero anche chiedersi: perché tutte le cose complesse quando possiamo posizionare l'ultima immagine in alto e aggiungere un bordo ad essa? Ciò nasconderebbe le immagini sotto l'immagine nidificata senza una maschera, giusto?
Questo è vero e otterremo quanto segue:
Non maskA clip-path. Sì, il codice è facile da capire, ma c'è un piccolo inconveniente: il colore del bordo deve essere lo stesso dello sfondo principale per rendere perfetta l'illusione. Questo piccolo inconveniente mi basta per rendere il codice più complesso in cambio di una vera trasparenza indipendente dallo sfondo. Non sto dicendo che un approccio al confine sia cattivo o sbagliato. Lo consiglierei nella maggior parte dei casi in cui lo sfondo è noto. Ma siamo qui per esplorare nuove cose e, cosa più importante, costruire componenti che non dipendono dal loro ambiente.
Proviamo un'altra forma questa volta:
Questa volta, abbiamo trasformato l'immagine nidificata in un cerchio anziché in un quadrato. È un compito facile border-radius Ma dobbiamo usare a ritaglio circolare per le altre immagini. Questa volta, però, faremo affidamento su a radial-gradient() invece di a conic-gradient() per ottenere quel bel look arrotondato.
.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); }Tutte le immagini utilizzano la stessa configurazione dell'esempio precedente, ma aggiorniamo il punto centrale ogni volta.
La figura sopra illustra il punto centrale di ogni cerchio. Tuttavia, nel codice effettivo, noterai che sto anche tenendo conto del divario per garantire che tutti i punti siano nella stessa posizione (il centro della griglia) per ottenere un cerchio continuo se li combiniamo.
Ora che abbiamo il nostro layout, parliamo dell'effetto hover. Nel caso non l'avessi notato, un fantastico effetto al passaggio del mouse aumenta le dimensioni dell'immagine nidificata e regola tutto il resto di conseguenza. Aumentare le dimensioni è un compito relativamente semplice, ma aggiornare il gradiente è più complicato poiché, per impostazione predefinita, i gradienti non possono essere animati. Per ovviare a questo, userò a font-size hack per poter animare il gradiente radiale.
Se controlli il codice del gradiente, puoi vedere che sto aggiungendo 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));Lo si sa em le unità sono relative all'elemento padre font-size, quindi cambiando il font-size della .gallery cambierà anche il calcolato em valore — questo è il trucco che stiamo usando. Stiamo animando il font-size da un valore di 0 ad un dato valore e, di conseguenza, il gradiente viene animato, allargando la parte ritagliata, seguendo la dimensione dell'immagine annidata che diventa sempre più grande.
Ecco il codice che evidenzia le parti coinvolte nell'effetto 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);
}I font-size trucco è utile se vogliamo animare gradienti o altre proprietà che non possono essere animate. Le proprietà personalizzate definite con @property possono risolvere un problema del genere, ma supporto per esso manca ancora al momento della scrittura.
Ho scoperto il font-size trucco da @SelenIT2 mentre si cerca di risolvere una sfida su Twitter.
Un'altra forma? Andiamo!
Questa volta abbiamo ritagliato l'immagine nidificata a forma di rombo. Ti lascio analizzare il codice come esercizio per capire come siamo arrivati qui. Noterai che la struttura è la stessa dei nostri esempi. Le uniche differenze sono il modo in cui utilizziamo il gradiente per creare la forma. Entra e impara!
Griglia di immagini circolari
Possiamo combinare ciò che abbiamo imparato qui e negli articoli precedenti per creare una griglia di immagini ancora più eccitante. Questa volta, rendiamo circolari tutte le immagini nella nostra griglia e, al passaggio del mouse, espandiamo un'immagine per rivelare l'intera cosa mentre copre il resto delle foto.
La struttura HTML e CSS della griglia non è una novità rispetto a prima, quindi saltiamo quella parte e concentriamoci invece sulla forma circolare e sull'effetto hover che vogliamo.
Useremo clip-path e il suo tool proprietario circle() funzione a - hai indovinato! — ritaglia un cerchio dalle immagini.
Quella figura illustra il clip-path utilizzato per la prima immagine. Il lato sinistro mostra lo stato iniziale dell'immagine, mentre il lato destro mostra lo stato sospeso. Puoi usare questo strumento online per giocare e visualizzare il clip-path valori.
Per le altre immagini, possiamo aggiornare il centro del cerchio (70% 70%) per ottenere il seguente codice:
.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%));
}Nota come stiamo definendo il clip-path valori come ripiego interiore var(). In questo modo possiamo aggiornare più facilmente il valore al passaggio del mouse impostando il valore del --_c variabile. Quando si usa circle(), la posizione predefinita del punto centrale è 50% 50%, quindi possiamo ometterlo per un codice più conciso. Ecco perché vedi che stiamo solo tramontando 50% invece di 50% at 50% 50%.
Quindi aumentiamo le dimensioni della nostra immagine al passaggio del mouse fino alle dimensioni complessive della griglia in modo da poter coprire le altre immagini. Assicuriamo inoltre il z-index ha un valore più alto sull'immagine in bilico, quindi è la prima nella nostra contesto di impilamento.
.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;
}Cosa sta succedendo con il
place-selfproprietà? Perché ne abbiamo bisogno e perché ogni immagine ha un valore specifico?
Ricordi il problema che abbiamo avuto nell'articolo precedente quando creando la griglia dei pezzi del puzzle? Abbiamo aumentato le dimensioni delle immagini per creare un overflow, ma l'overflow di alcune immagini non era corretto. Li abbiamo riparati usando il place-self proprietà.
Stesso problema qui. Stiamo aumentando le dimensioni delle immagini in modo che ognuna trabocchi dalle celle della griglia. Ma se non facciamo nulla, tutti traboccheranno sul lato destro e inferiore della griglia. Quello di cui abbiamo bisogno è:
- la prima immagine che supera il bordo inferiore destro (il comportamento predefinito),
- la seconda immagine per traboccare il bordo inferiore sinistro,
- la terza immagine per traboccare il bordo in alto a destra, e
- la quarta immagine per traboccare il bordo in alto a sinistra.
Per ottenerlo, dobbiamo posizionare correttamente ogni immagine usando il file place-self proprietà.
Nel caso in cui non abbiate familiarità place-self, è l'abbreviazione di justify-self ed align-self per posizionare l'elemento orizzontalmente e verticalmente. Quando assume un valore, entrambi gli allineamenti utilizzano lo stesso valore.
Pannelli immagine in espansione
In un precedente articolo, ho creato un fantastico effetto zoom che si applica a una griglia di immagini in cui possiamo controllare tutto: numero di righe, numero di colonne, dimensioni, fattore di scala, ecc.
Un caso particolare è stato il classico pannello espandibile, dove abbiamo solo una fila e un contenitore a tutta larghezza.
Prenderemo questo esempio e lo combineremo con le forme!
Prima di continuare, consiglio vivamente di leggere il mio altro articolo per capire come funzionano i trucchi che stiamo per coprire. Dai un'occhiata e continueremo qui a concentrarci sulla creazione delle forme del pannello.
Innanzitutto, iniziamo semplificando il codice e rimuovendo alcune variabili
Abbiamo solo bisogno di una riga e il numero di colonne dovrebbe essere regolato in base al numero di immagini. Ciò significa che non abbiamo più bisogno di variabili per il numero di righe (--n) e colonne (--m ) ma dobbiamo usare grid-auto-flow: column, consentendo alla griglia di generare automaticamente colonne quando aggiungiamo nuove immagini. Prenderemo in considerazione un'altezza fissa per il nostro container; per impostazione predefinita, sarà a larghezza intera.
Tagliamo le immagini in una forma obliqua:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Ancora una volta, ogni immagine è contenuta nella sua cella della griglia, quindi c'è più spazio tra le immagini di quanto vorremmo:
Dobbiamo aumentare la larghezza delle immagini per creare una sovrapposizione. Sostituiamo min-width: 100% con min-width: calc(100% + var(--s)), Dove --s è una nuova variabile che controlla la forma.
Ora dobbiamo correggere la prima e l'ultima immagine, in modo che sbiadiscano dalla pagina senza spazi vuoti. In altre parole, possiamo rimuovere l'inclinazione dal lato sinistro della prima immagine e l'inclinazione dal lato destro dell'ultima immagine. Abbiamo bisogno di un nuovo clip-path in particolare per quelle due immagini.
Dobbiamo anche correggere l'overflow. Per impostazione predefinita, tutte le immagini andranno in overflow su entrambi i lati, ma per la prima abbiamo bisogno di un overflow sul lato destro mentre abbiamo bisogno di un overflow sinistro per l'ultima immagine.
.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%);
}Il risultato finale è un bel pannello in espansione di immagini inclinate!
Possiamo aggiungere tutte le immagini che desideri e la griglia si regolerà automaticamente. Inoltre, abbiamo solo bisogno di controllare un valore per controllare la forma!
Avremmo potuto realizzare questo stesso layout con flexbox poiché abbiamo a che fare con una singola riga di elementi. Qui è la mia implementazione.
Certo, le immagini inclinate sono belle, ma che ne dici di uno schema a zig-zag? Ho già preso in giro questo a alla fine dell'ultimo articolo.
Tutto quello che sto facendo qui è sostituire clip-path con mask… e indovina cosa? Ho già un articolo dettagliato su creando quella forma a zig-zag — per non parlare di un online generatore per ottenere il codice. Vedi come tutto si unisce?
La parte più complicata qui è assicurarsi che gli zig-zag siano perfettamente allineati e, per questo, dobbiamo aggiungere un offset per ogni :nth-child(odd) elemento immagine.
.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));
}Notare l'uso del --_p variabile, a cui ricadrà 0% ma sarà uguale a --_s per le immagini dispari.
Ecco una demo che illustra il problema. Passa il mouse per vedere come l'offset — definito da --_p — sta fissando l'allineamento.
Inoltre, nota come utilizziamo una maschera diversa per la prima e l'ultima immagine come abbiamo fatto nell'esempio precedente. Abbiamo solo bisogno di uno zig-zag sul lato destro della prima immagine e sul lato sinistro dell'ultima immagine.
E perché non i lati arrotondati? Facciamolo!
So che il codice può sembrare spaventoso e difficile da capire, ma tutto ciò che sta succedendo è una combinazione di diversi trucchi che abbiamo trattato in questo e in altri articoli che ho già condiviso. In questo caso, utilizzo la stessa struttura di codice delle forme a zig-zag e inclinate. Confrontalo con quegli esempi e non troverai alcuna differenza! Sono gli stessi trucchi il mio precedente articolo sull'effetto zoom. Quindi, sto usando il mio altra scrittura ed il mio generatore online per ottenere il codice per la maschera che crea quelle forme arrotondate.
Se ricordi cosa abbiamo fatto per lo zig-zag, avevamo usato la stessa maschera per tutte le immagini, ma poi abbiamo dovuto aggiungere un offset alle immagini dispari per creare una sovrapposizione perfetta. In questo caso, abbiamo bisogno di una maschera diversa per le immagini dispari.
La prima maschera:
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;
Il secondo:
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))
L'unico sforzo che ho fatto qui è aggiornare la seconda maschera per includere la variabile gap (--g) per creare quello spazio tra le immagini.
Il tocco finale è correggere la prima e l'ultima immagine. Come tutti gli esempi precedenti, la prima immagine necessita di un bordo sinistro dritto mentre l'ultima necessita di un bordo destro dritto.
Per la prima immagine, sappiamo sempre la maschera che deve avere, che è la seguente:
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
Per l'ultima immagine, dipende dal numero di elementi, quindi importa se quell'elemento lo è :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))
}È tutto! Tre layout diversi ma ogni volta gli stessi trucchi CSS:
- la struttura del codice per creare l'effetto zoom
- una maschera o un tracciato di ritaglio per creare le forme
- una configurazione separata per gli elementi dispari in alcuni casi per assicurarsi di avere una sovrapposizione perfetta
- una configurazione specifica per la prima e l'ultima immagine per mantenere la forma su un solo lato.
Ed ecco una grande demo con tutti loro insieme. Tutto ciò che serve è aggiungere una classe per attivare il layout che vuoi vedere.
Ed ecco quello con l'implementazione di Flexbox
Concludendo
Uff, abbiamo finito! So che ci sono molti trucchi ed esempi CSS tra questo articolo e l'ultimo, per non parlare di tutti gli altri trucchi a cui ho fatto riferimento qui da altri articoli che ho scritto. Mi ci è voluto del tempo per mettere insieme tutto e non devi capire tutto in una volta. Una lettura ti darà una buona panoramica di tutti i layout, ma potresti dover leggere l'articolo più di una volta e concentrarti su ciascun esempio per cogliere tutti i trucchi.
Hai notato che non abbiamo toccato affatto l'HTML a parte forse il numero di immagini nel markup? Tutti i layout che abbiamo realizzato condividono lo stesso codice HTML, che non è altro che un elenco di immagini.
Prima di concludere, vi lascio con un ultimo esempio. È un "contro" tra due personaggi dell'anime con un fantastico effetto al passaggio del mouse.
E tu? Puoi creare qualcosa in base a ciò che hai imparato? Non è necessario che sia complesso: immagina qualcosa di interessante o divertente come ho fatto con quell'anime matchup. Può essere un buon esercizio per te e potremmo concludere con un'eccellente raccolta nella sezione commenti.
