0

Background Con Gradiente Animato Solo Con il CSS

Vi è mai capitato di dover creare un elemento che come background avesse un gradiente e all'hover i colori del gradiente si invertissero? La risposta è certamente "Sì".

👣 Primi passi

Per prima cosa abbiamo bisogno di un elemento che abbia come background un gradiente (da #3DE9BD a #2FB594) da animare: io ho scelto di usare un bottone.

ad oggi la funzione css linear-gradient() è supportata da tutti i browser, ma per alcune vecchie versioni di alcuni di questi (Firefox, Internet Explorer) non c’è piena compatibilità e per visualizzare il gradiente correttamente è necessario l’utilizzo di un prefisso. A questo riguardo, esistono dei tool di autoprefix per il css che si fanno carico di inserire eventuali prefissi in base alle versioni di browser che devono essere supportati dal progetto.

É il momento di parlare di animazione.
Per animare qualsiasi altra proprietà di un elemento con il css usiamo la proprietà css transition, ma nel caso di un gradiente questo non è possibile. Ora vi proporrò due alternative per ovviare al problema.

1️⃣ Soluzione 1 – usando ::before e ::after

La prima soluzione consiste nell’utilizzare gli elementi ::before e ::after.

Rendiamo il posizionamento del bottone relativo in modo da poter posizionare i due pseudo-elementi in maniera assoluta al suo interno con larghezza e altezza al 100% per coprirne l’intera dimensione.

A questo punto, a ::before assegnamo come background un gradiente da #3DE9BD a #2FB594 e opacità 1 mentre a ::after il gradiente con i colori invertiti ovvero da #2FB594 a #3DE9BD e opacità 0.

Ad entrambi aggiungiamo la proprietà transition per ottenere l’animazione all’hover del mouse. Inoltre all’hover, i valori dell’opacità dovranno invertirsi: ::before avrà opacità 0 e ::after avrà opacità 1.

Ci siamo quasi, ora dobbiamo fare in modo che il testo del bottone sia visibile e non venga coperto dai due pseudo-elementi: basta inserire il testo all’interno di uno <span> al quale assegnamo un posizionamento relativo e uno z-index pari a 1.

🏆 Obiettivo raggiunto!

2️⃣ Soluzione 2 – usando uno <span>

Supponiamo che per qualche motivo necessitiamo di uno dei due pseudo-elementi per il nostro bottone, ad esempio ci servono per mostrare un’icona, quindi abbiamo bisogno di utilizzare qualche altro elemento per raggiungere il nostro scopo.

E perchè non usare uno <span>?
<span> non ha nessuna implicazione semantica, quindi è la soluzione perfetta.

Prima di tutto, anche per questa soluzione dobbiamo attribuire il posizionamento relativo al bottone per posizionare in maniera assoluta lo <span> e fissarne la larghezza e altezza al 100%.

Prossimo step? Semplice: sfruttiamo gli pseudo-elementi dello <span> attribuendogli esattamente le stesse caratteristiche della soluzione 1, inseriamo il testo all’interno di un secondo <span> a cui assegnamo un posizionamento relativo e uno z-index pari a 1 e…

🏆 Il gioco è fatto!

🎓 Conclusione

Con questi due semplici metodi otteniamo il risultato sperato senza fare uso di infinite righe di codice o librerie javascript, ma semplicemente scrivendo qualche riga di css in più.

In ogni caso, la mia speranza è che in un prossimo futuro non sia necessario nemmeno questo work-around e che l’obiettivo sia raggiungibile con il semplice transition.

Teniamo le dita incrociate 🤞🏼😉