Fantastici effetti CSS al passaggio del mouse che utilizzano il ritaglio dello sfondo, le maschere e il 3D

Abbiamo esaminato una serie di post su approcci interessanti agli effetti hover CSS. Abbiamo iniziato con a un sacco di esempi che usano i CSS background proprietà, per poi passare al text-shadow proprietà dove tecnicamente non abbiamo usato ombre. Li abbiamo anche combinati con variabili CSS e calc() per ottimizzare il codice e renderlo facile da gestire.

In questo articolo, svilupperemo questi due articoli per creare animazioni al passaggio del mouse CSS ancora più complesse. Stiamo parlando di ritaglio dello sfondo, maschere CSS e persino di bagnarci i piedi con le prospettive 3D. In altre parole, questa volta esploreremo tecniche avanzate e spingeremo i limiti di ciò che i CSS possono fare con gli effetti al passaggio del mouse!

---

Ecco solo un assaggio di ciò che stiamo realizzando:

Utilizzo degli effetti al passaggio del mouse background-clip

Parliamone background-clip. Questa proprietà CSS accetta a text valore della parola chiave che ci consente di applicare gradienti al testo di un elemento anziché quello reale sfondo.

Quindi, ad esempio, possiamo cambiare il colore del testo al passaggio del mouse come faremmo usando il file color proprietà, ma in questo modo animiamo il cambio colore:

Tutto quello che ho fatto è stato aggiungere background-clip: text all'elemento e transition , il background-position. Non deve essere più complicato di così!

Ma possiamo fare meglio se combiniamo più gradienti con diversi valori di ritaglio dello sfondo.

In questo esempio, utilizzo due gradienti diversi e due valori con background-clip. Il primo gradiente di sfondo viene ritagliato sul testo (grazie al file text value) per impostare il colore al passaggio del mouse, mentre il secondo gradiente di sfondo crea la sottolineatura inferiore (grazie al padding-box valore). Tutto il resto è copiato direttamente da il lavoro che abbiamo svolto nel primo articolo di questa serie.

Che ne dici di un effetto hover in cui la barra scorre dall'alto verso il basso in modo che sembri che il testo venga scansionato e quindi colorato:

Questa volta ho cambiato la dimensione del primo gradiente per creare la linea. Poi lo faccio scorrere con l'altro gradiente che aggiorna il colore del testo per creare l'illusione! Puoi visualizzare cosa sta succedendo in questa penna:

Abbiamo solo scalfito la superficie di ciò che possiamo fare con il nostro background-clippoteri di ping! Tuttavia, questa tecnica è probabilmente qualcosa che vorresti evitare di utilizzare in produzione, poiché è noto che Firefox ha un file molti bug segnalati correlate a background-clip. Anche Safari ha problemi di supporto. Ciò lascia solo Chrome con un solido supporto per queste cose, quindi forse tienilo aperto mentre continuiamo.

Passiamo ad un altro effetto hover utilizzando background-clip:

Probabilmente stai pensando che questo sembri semplicissimo rispetto a quello che abbiamo appena trattato - e hai ragione, non c'è niente di speciale qui. Tutto quello che sto facendo è far scorrere un gradiente aumentando la dimensione di un altro.

Ma siamo qui per esaminare gli effetti avanzati del passaggio del mouse, giusto? Cambiamolo leggermente in modo che l'animazione sia diversa quando il cursore del mouse lascia l'elemento. Stesso effetto al passaggio del mouse, ma un finale diverso per l'animazione:

Fantastico, vero? analizziamo il codice:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Abbiamo tre livelli di sfondo: due gradienti e il background-color definito usando --_c variabile inizialmente impostata su trasparente (#0000). Al passaggio del mouse, cambiamo il colore in bianco e il --_c variabile al colore principale (--c).

Ecco cosa sta succedendo a riguardo transition: Innanzitutto applichiamo una transizione a tutto ma ritardiamo il color ed background-color by 0.5s per creare l'effetto scorrevole. Subito dopo, cambiamo il file color e la background-color. Potresti non notare alcun cambiamento visivo perché il testo è già bianco (grazie al primo gradiente) e lo sfondo è già impostato sul colore principale (grazie al secondo gradiente).

Quindi, al passaggio del mouse, applichiamo una modifica istantanea a tutto (notare il file 0s ritardo), ad eccezione del color ed background-color che hanno una transizione. Ciò significa che riportiamo tutti i gradienti al loro stato iniziale. Ancora una volta, probabilmente non vedrai alcun cambiamento visivo a causa del testo color ed background-color già cambiato al passaggio del mouse.

Infine, applichiamo la dissolvenza al colore e a background-color per creare la parte dell'animazione in cui si sposta il mouse. Lo so, potrebbe essere difficile da comprendere, ma puoi visualizzare meglio il trucco utilizzando colori diversi:

Passa il mouse sopra molte volte e vedrai le proprietà che si animano al passaggio del mouse e quelle che si animano quando si sposta il mouse. Potrete quindi comprendere come siamo arrivati ​​a due diverse animazioni per lo stesso effetto hover.

Non dimentichiamolo la tecnica di commutazione DRY che abbiamo utilizzato negli articoli precedenti di questa serie per ridurre la quantità di codice utilizzando una sola variabile per lo switch:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Se ti stai chiedendo perché ho scelto la sintassi RGB per il colore principale, è perché avevo bisogno di giocare con la trasparenza alfa. Sto anche usando la variabile --_t per ridurre un calcolo ridondante utilizzato nel file transition proprietà.

Prima di passare alla parte successiva, ecco altri esempi di effetti al passaggio del mouse che ho realizzato qualche tempo fa e su cui faccio affidamento background-clip. Sarebbe troppo lungo elencarli nel dettaglio, ma con ciò che abbiamo imparato finora puoi facilmente comprendere il codice. Può essere una buona ispirazione provarne alcuni da soli senza guardare il codice.

Lo so, lo so. Questi sono effetti al passaggio del mouse folli e insoliti e mi rendo conto che sono eccessivi nella maggior parte delle situazioni. Ma ecco come praticare e imparare i CSS. Ricorda, noi spingendo i limiti degli effetti al passaggio del mouse CSS. L’effetto hover potrebbe essere una novità, ma stiamo imparando nuove tecniche lungo il percorso che potranno sicuramente essere utilizzate per altre cose.

Effetti al passaggio del mouse utilizzando i CSS mask

Indovina un po? Il CSS mask la proprietà utilizza i gradienti allo stesso modo di background proprietà lo fa, quindi vedrai che ciò che faremo dopo è piuttosto semplice.

Iniziamo costruendo una sottolineatura elegante.

sto usando background per creare un bordo inferiore a zig-zag in quella demo. Se volessi applicare un'animazione a quella sottolineatura, sarebbe noioso farlo utilizzando solo le proprietà dello sfondo.

Inserisci CSS mask.

Il codice può sembrare strano ma la logica è sempre la stessa di tutte le precedenti animazioni di sfondo. IL mask è composto da due gradienti. Il primo gradiente è definito con un colore opaco che copre l'area del contenuto (grazie al content-box valore). La prima sfumatura rende visibile il testo e nasconde il bordo inferiore a zig-zag. content-box Europe è mask-clip valore che si comporta allo stesso modo di background-clip

linear-gradient(#000 0 0) content-box

Il secondo gradiente coprirà l'intera area (grazie a padding-box). Questo ha una larghezza definita utilizzando il file --_p variabile e verrà posizionata sul lato sinistro dell'elemento.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Ora tutto ciò che dobbiamo fare è modificare il valore di --_p al passaggio del mouse per creare un effetto scorrevole per il secondo gradiente e rivelare la sottolineatura.

.hover:hover { --_p: 100%; color: var(--c);
}

La demo seguente utilizza i livelli della maschera come sfondi per vedere meglio il trucco in atto. Immagina che le parti verde e rossa siano le parti visibili dell'elemento mentre tutto il resto è trasparente. Questo è ciò che farà la maschera se usiamo gli stessi gradienti.

Con un trucco del genere, possiamo facilmente creare molte variazioni semplicemente utilizzando una diversa configurazione del gradiente con mask proprietà:

Ogni esempio in quella demo utilizza una configurazione del gradiente leggermente diversa per il file mask. Da notare anche la separazione nel codice tra la configurazione dello sfondo e la configurazione della maschera. Possono essere gestiti e mantenuti in modo indipendente.

Cambiamo invece la configurazione dello sfondo sostituendo la sottolineatura a zig-zag con una sottolineatura ondulata:

Un'altra raccolta di effetti al passaggio del mouse! Ho mantenuto tutte le configurazioni della maschera e ho cambiato lo sfondo per creare una forma diversa. Ora puoi capire come ho potuto per raggiungere 400 effetti al passaggio del mouse senza pseudo-elementi – e possiamo averne ancora di più!

Ad esempio, perché non qualcosa del genere:

Ecco una sfida per te: Il bordo nell'ultima demo è un gradiente che utilizza il file mask proprietà per rivelarlo. Riesci a capire la logica dietro l'animazione? Potrebbe sembrare complesso a prima vista, ma è molto simile alla logica che abbiamo esaminato per la maggior parte degli altri effetti al passaggio del mouse che si basano sui gradienti. Pubblica la tua spiegazione nei commenti!

Effetti al passaggio del mouse in 3D

Potresti pensare che sia impossibile creare un effetto 3D con un singolo elemento (e senza ricorrere a pseudo-elementi!) ma i CSS hanno un modo per realizzarlo.

Quello che vedi non è un vero effetto 3D, ma piuttosto una perfetta illusione del 3D nello spazio 2D che combina il CSS background, clip-pathe transform proprietà.

La prima cosa che facciamo è definire le nostre variabili:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Quindi creiamo un bordo trasparente con larghezze che utilizzano le variabili di cui sopra:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

I lati superiore e destro dell'elemento devono entrambi essere uguali a --b valore mentre i lati inferiore e sinistro devono essere uguali alla somma di --b ed --d (qual è --_s variabile).

Per la seconda parte del trucco, dobbiamo definire un gradiente che copra tutte le aree di confine che abbiamo definito in precedenza. UN conic-gradient funzionerà per quello:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Aggiungiamo un altro gradiente per la terza parte del trucco. Questo utilizzerà due valori di colore bianco semitrasparente che si sovrappongono al primo gradiente precedente per creare diverse sfumature del colore principale, dandoci l'illusione di ombreggiatura e profondità.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

L'ultimo passaggio consiste nell'applicare a CSS clip-path per tagliare gli angoli per quella sensazione di lunga ombra:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

È tutto! Abbiamo appena creato un rettangolo 3D con nient'altro che due gradienti e un clip-path che possiamo facilmente regolare utilizzando le variabili CSS. Ora non ci resta che animarlo!

Notare le coordinate della figura precedente (indicate in rosso). Aggiorniamoli per creare l'animazione:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

Il trucco sta nel nascondere le parti inferiore e sinistra dell'elemento in modo che tutto ciò che rimane sia un elemento rettangolare senza alcuna profondità.

Questa penna isola il clip-path parte dell'animazione per vedere cosa sta facendo:

Il tocco finale è spostare l'elemento nella direzione opposta utilizzando translate – e l’illusione è perfetta! Ecco l'effetto utilizzando diversi valori di proprietà personalizzate per diverse profondità:

Il secondo effetto hover segue la stessa struttura. Tutto quello che ho fatto è stato aggiornare alcuni valori per creare un movimento in alto a sinistra anziché in alto a destra.

Combinazione di effetti!

La cosa fantastica di tutto ciò che abbiamo trattato è che si completano a vicenda. Ecco un esempio in cui sto aggiungendo , il text-shadow efficacia dal secondo articolo nella serie al background tecnica di animazione dal primo articolo durante l'utilizzo del trucco 3D di cui abbiamo appena parlato:

Il codice vero e proprio potrebbe creare confusione all'inizio, ma vai avanti e analizzalo un po' più a fondo: noterai che è semplicemente una combinazione di questi tre diversi effetti, praticamente mescolati insieme.

Consentitemi di concludere questo articolo con un ultimo effetto al passaggio del mouse in cui combinò sfondo, percorso di ritaglio e un pizzico di perspective per simulare un altro effetto 3D:

Ho applicato lo stesso effetto alle immagini e il risultato è stato abbastanza buono per simulare il 3D con un singolo elemento:

Vuoi dare un'occhiata più da vicino a come funziona l'ultima demo? Ci ho scritto qualcosa.

Concludendo

Uffa, abbiamo finito! Lo so, sono molti CSS complicati ma (1) siamo sul sito web giusto per questo genere di cose e (2) l'obiettivo è spingere la nostra comprensione delle diverse proprietà CSS a nuovi livelli consentendo loro di interagire con l'un l'altro.

Potresti chiederti quale sarà il prossimo passo da qui ora che stiamo chiudendo questa piccola serie di effetti hover CSS avanzati. Direi che il passo successivo è prendere tutto ciò che abbiamo imparato e applicarlo ad altri elementi, come pulsanti, voci di menu, collegamenti, ecc. Abbiamo mantenuto le cose piuttosto semplici limitando i nostri trucchi a un elemento titolo per questo esatto motivo ; l'elemento reale non ha importanza. Prendi i concetti e corri con loro per creare, sperimentare e imparare cose nuove!

---

Fantastici effetti CSS al passaggio del mouse che utilizzano il ritaglio dello sfondo, le maschere e il 3D originariamente pubblicato il CSS-Tricks. Dovresti ricevi la newsletter.

• Coinsmart. Il miglior scambio di bitcoin e criptovalute d'Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. ACCESSO LIBERO.
• Criptofalco. Radar Altcoin. Prova gratuita.
• Fonte: https://css-tricks.com/css-hover-effects- background-masks-3d/