In questo articolo ci concentreremo sull'animazione dei testi utilizzando le regole CSS, il linguaggio di formattazione con cui modellare a piacimento elementi HTML e creare effetti ed animazioni personalizzate all'interno di pagine Web e siti Internet.
In particolare in questa guida vedremo come trasformare un semplice testo in una scritta NEON animata, come questa:
Come animare ed assegnare effetti al testo in CSS
Iniziamo, per prima cosa ovviamente creiamo un nuovo documento di tipo HTML.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Creare effetto NEON in movimento con CSS</title>
</head>
<body>
</body>
</html>Creiamo anche un nuovo file CSS all'interno del quale andremo ad inserire tutte le regole che ci permetteranno di realizzare l'effetto desiderato. Assegniamo a questo un nome specifico, ad esempio style.css, in modo da poterlo identificare e richiamare facilmente. Dopo la creazione del file CSS esterno colleghiamolo con il file HTML:
<link href="style.css" rel="stylesheet" type="text/css">A questo punto finiamo di comporre la pagine HTML includendo gli elementi che ci serviranno. In un secondo momento ci concentreremo sulle regole di stile e sulle animazioni che saranno tutte inserite nel file CSS. Definiamo quindi gli elementi necessari:
<div id="container">
<span id="txt" >PARTY</span>
<span id="gradient"></span>
<span id="light"></span>
</div>Il DIV esternoè il contenitore principale di tutti gli elementi che si suddividono in questo modo:
#txt
Questo elemento rappresenta il testo sul quale andremo a lavorare, nel mio caso ho inserito la parola PARTY, giusto per restare in tema neon.
#gradient
Questo elemento sarà un oggetto sfumato che andremo a sovrapporre all'elemento testo ed inserito nell'esatto tracciato della parola grazie alla proprietà mix-blend-mode che vedremo tra poco.
#light
L'elemento dedicato alla luce dell'animazione che si inserirà anch'essa all'interno del tracciato della nostra parola, creando l'effetto luminoso in movimento.
L'animazione con CSS
Creati gli elementi diamo inizio alla formattazione ed alla creazione delle animazioni partendo dall'oggetto più esterno, ovvero il BODY. Andiamo all'interno del file style.css e definiamo lo stile del contenitore del nostro documento
body{
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
margin: 0px;
background: #000;
}Grazie alle regole display: grid; align-items: center; e justify-items: center; tutti gli oggetti interni saranno posizionati esattamente al centro della pagina.
Definito lo stile ed il colore di fondo, nel nostro caso è bene usare un colore scuro come il nero (#000) per ottenere un risultato più reale, passiamo alla definizione dello stile del DIV #container.
#container {
overflow: hidden;
filter: brightness(300%);
}Questo elemento servirà per definire un'area di azione entro la quale gli elementi dovranno agire, specie quelli in movimento. Grazie alla proprietà overflow:hidden stabiliamo il campo di azione. Inseriamo inoltre la proprietà filter:brightness la quale aumenterà il livello di luminosità di tutti gli oggetti interni creando un risultato ancor più simile alla luce neon.
La formattazione del testo
Definiamo le caratteristiche principale quali la grandezza, il font-family e il colore. Inseriamo inoltre un background dello stesso colore del body (#000) che sarà necessario per la mascheratura dell'oggetto.
#txt {
color: #fff;
font-size:200px;
font-weight: bold;
font-family:sans-serif;
text-transform: uppercase;
background:#000;
}
Aggiungiamo ora lo pseudo-elemento ::before all'elemento principale #txt, all'interno del quale andiamo a modificare la nostra scritta inserendo i primi effetti mascheratura e fusione grazie alla proprietà mix-blend-mode: difference;. Essa sottrae il più scuro dei due colori dal colore più chiaro e grazie alla proprietà filter: blur(3px); genera la forma desiderata alla nostra parola.
#txt::before {
content: 'PARTY';
position: absolute;
mix-blend-mode: difference;
filter: blur(3px);
}
Proseguiamo ora con la modellazione del secondo degli elementi interni, ovvero l'oggetto chiamato #gradient.
#gradient{
width: 100%;
height:100%;
position: absolute;
top: 0;
left:0;
background: linear-gradient(to right, #ff0084 0%,#6e00ff 100%);
mix-blend-mode: multiply;
}Quello che abbiamo fatto è stato definire la grandezza e la posizione dell'elemento, allineandolo al DIV #container e quindi sovrapponendolo al nostro testo. Successivamente abbiamo inserito una sfumatura personalizzata e grazie alla proprietà mix-blend-mode: multiply; abbiamo moltiplicato l'elemento per lo sfondo e sostituito il colore stesso, ottenendo il seguente risultato:
Luminosità e loop
Direi che siamo a buon punto, ora non rimane altro che creare l'animazione luminosa e un movimento in loop sopra la nostra parola. Definiamo quindi le caratteristiche e le animazioni dell'ultimo elemento interno, ovvero #light.
Dopo aver stabilito le dimensioni del livello che andrà a dar forma alla luminosità inseriamo una sfumatura multipla che tra poco andremo a mascherare e ad animare all'interno del tracciato della parola.
#light {
position: absolute;
top:-100%;
left:-100%;
right:0;
bottom:0;
background: radial-gradient(circle,white,black 35%) center / 25% 25%;
}
Questo è quello che otteniamo dopo aver impostato la grandezza e la distanza degli elementi presenti nella sfumatura. Ora è tempo di creare la mascheratura e l'animazione aggiungendo alle regole CSS queste 2 regole.
#light {
mix-blend-mode: color-dodge;
animation: light-area 3s linear infinite;
}La proprietà chiamata mix-blend-mode: color-dodge; permette di schiarire il colore di sfondo per riflettere il quello del contenuto. Mentre animation: light-area 3s linear infinite; permette di creare e dare istruzioni all'animazione che richiameremo grazie al nome light-area
A questo punto non rimane che richiamare l'animazione light-area ottenendo in questo modo il risultato finale desiderato.
@keyframes light-area {
to { transform: translate(50%,50%); }
}
