Decorazioni di immagini fantasiose: contorni e animazioni complesse

Abbiamo trascorso gli ultimi due articoli di questa serie in tre parti giocando con i gradienti per creare decorazioni di immagini davvero accurate utilizzando nient'altro che elemento. In questo terzo e ultimo pezzo esploreremo più tecniche utilizzando i CSS outline proprietà. Potrebbe sembrare strano perché generalmente usiamo outline per tracciare una linea semplice attorno a un elemento - più o meno come border ma può disegnare solo tutti e quattro i lati contemporaneamente e non fa parte del Box Model.

Possiamo fare di più, però, ed è ciò che voglio sperimentare in questo articolo.

Cominciamo con il nostro primo esempio: una sovrapposizione che scompare al passaggio del mouse con un'animazione interessante:

Potremmo ottenere questo risultato aggiungendo un elemento in più all’immagine, ma è ciò che stiamo sfidando noi stessi non fare in questa serie. Invece, possiamo ricorrere al CSS outline proprietà e leva finanziaria che può avere un offset negativo ed è in grado di sovrapporsi al suo elemento.

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

Il trucco è creare un file outline è spesso quanto la metà della dimensione dell'immagine, quindi spostalo della metà della dimensione dell'immagine con un valore negativo. Aggiungi un po' di semitrasparenza con il colore e abbiamo la nostra sovrapposizione!

Il resto è quello che succede :hover. Aggiorniamo il outline e la transizione tra entrambi i contorni crea il fantastico effetto hover. La stessa tecnica può essere utilizzata anche per creare un effetto sfumato dove non muoviamo il outline ma rendilo trasparente.

Invece di usare la metà delle dimensioni dell'immagine in questa, ne sto usando una molto grande outline valore dello spessore (100vmax) durante l'applicazione di una maschera CSS. Con questo, non è più necessario conoscere la dimensione dell'immagine: il trucco funziona a tutte le dimensioni!

Potresti riscontrare problemi nell'utilizzo 100vmax come un grande valore in Safari. In tal caso, considera il trucco precedente in cui sostituisci the 100vmax con metà della dimensione dell'immagine.

Possiamo andare ancora oltre! Ad esempio, invece di limitarsi a ritagliare l'extra outline, possiamo creare forme e applicare un'animazione di rivelazione fantasiosa.

Fantastico, vero? IL outline è ciò che crea la sovrapposizione gialla. IL clip-path ritaglia l'extra outline per ottenere la forma a stella. Quindi, al passaggio del mouse, rendiamo il colore trasparente.

Oh, vuoi invece i cuori? Possiamo certamente farlo!

Immagina tutte le possibili combinazioni che possiamo creare. Tutto quello che dobbiamo fare è disegnare una forma con una maschera CSS e/o clip-path e uniscilo al outline trucco. Una soluzione, infinite possibilità!

E sì, possiamo sicuramente animare anche questo. Non dimentichiamolo clip-path è animabile e mask si basa sui gradienti, qualcosa che abbiamo trattato in modo estremamente dettagliato nei primi due articoli di questa serie.

Lo so, l'animazione è un po' glitch. Si tratta più di una demo per illustrare l'idea piuttosto che del “prodotto finale” da utilizzare in un sito produttivo. Vorremmo ottimizzare le cose per una transizione più naturale.

Ecco una demo che utilizza mask Invece. È quello con cui ti ho preso in giro alla fine l'ultimo articolo:

Lo sapevi che la outline proprietà era capace di tanta meraviglia? Aggiungilo alla tua casella degli strumenti per decorazioni di immagini fantasiose!

Combina tutte le cose!

Ora che abbiamo imparato molti trucchi utilizzando sfumature, maschere, ritaglio e contorno, è il momento del gran finale. Concludiamo questa serie combinando tutto ciò che abbiamo imparato nelle ultime settimane per mostrare non solo le tecniche, ma dimostrare quanto questi approcci siano flessibili e modulari.

Se vedessi queste demo per la prima volta, potresti supporre che ci siano un sacco di wrapper div extra e pseudo-elementi utilizzati per realizzarli. Ma tutto avviene direttamente sul elemento. È l'unico selettore di cui abbiamo bisogno per ottenere queste forme ed effetti avanzati!

Concludendo

Bene, cavolo, grazie per essere stato con me in questa serie in tre parti nelle ultime settimane. Abbiamo esplorato una serie di tecniche diverse che trasformano immagini semplici in qualcosa di accattivante e interattivo. Utilizzerai tutto ciò che abbiamo coperto? Certamente no! Ma la mia speranza è che questo sia stato un buon esercizio per approfondire gli usi avanzati delle funzionalità CSS, come gradienti, mask, clip-pathe outline.

E abbiamo fatto tutto con uno solo elemento! Nessun wrapper div extra e pseudo-elementi. Certo, è un vincolo che ci imponiamo, ma ci ha anche spinto a esplorare i CSS e provare a trovare soluzioni innovative a casi d’uso comuni. Quindi, prima di inserire markup aggiuntivo nel tuo HTML, pensa se i CSS sono già in grado di gestire l’attività.