Come animare un logo in CSS

Le basi della programmazione per il web ricadono nei linguaggi html&css.

Come abbiamo spiegato tante volte, il linguaggio html è un linguaggio di markup che serve a creare l’impalcatura, lo scheletro della nostra pagina web a livello semantico e di struttura. Il linguaggio CSS è pane quotidiano per qualsiasi frontend developer che si rispetti, in quanto costituisce il punto di partenza per la realizzazione di un’interfaccia visiva accattivante. Il css permette ad un programmatore front-end di sbizzarrirsi, consentendogli anche di creare animazioni. Lo scopriremo in questo articolo ma, prima, facciamo un passo indietro e rispolveriamo un po’ di concetti!

CSS, cos’è?

Il linguaggio CSS, o Cascading Style Sheets, è un linguaggio usato per programmare la resa grafica di documenti scritti in un linguaggio di markup, ovvero in linguaggio HTML. 

Cascading in CSS significa che i fogli di stile CSS si applicano a cascata: quando un elemento è soggetto a diverse regole, tutte le regole sono valide, ma prevale sempre l’ultima regola, la più specifica. Ad esempio, se gli elementi titolo del sito devono essere ancorati a sinistra (regola generale), ma una regola concorrente stabilisce che il titolo deve essere centrato in quella pagina (regola specifica), il titolo verrà presentato come elemento centrato perché viene applicata l’ultima regola, la più specifica.

Come dicevamo il CSS consente allo sviluppatore front-end di divertirsi anche sperimentando delle animazioni: immagina di realizzare il tuo sito web personale, un portfolio che mostri tutti i tuoi lavori, col tuo logo personale li, in bella vista. Quanto sarebbe accattivante creare un’animazione per quel logo generando un effetto di logo reveal? 

In questo articolo impareremo proprio come animare un logo attraverso il linguaggio CSS.  Iniziamo!

 

CSS tutorial: come animare un logo in CSS

Partiremo utilizzando un logo SVG: se vuoi, puoi realizzarne uno da zero facendo fede alla libreria Material Line Icons. 

Fondamentalmente l’animazione CSS di un logo è realizzata con un trattino molto lungo che si muove, in cui il trattino è la linea di disegno e lo spazio vuoto. La lunghezza e la posizione del trattino sono controllate da stroke-dasharray e stroke-dashoffset, che sono entrambi animabili. Queste due fanno parte delle Material Line Icons.

Le animazioni in CSS si possono ottenere in diversi modi, nel nostro caso, è possibile farlo attraverso la modifica del codice CSS che si trova nell’SVG esportato. Immaginiamo di voler animare il logo presente a questo link.

Per farlo, dobbiamo aggiungere degli stili CSS all’SVG.

 

@media (prefers-reduced-motion) {
 2.   path {
 3.     animation: none !important;
 4.     stroke-dasharray: unset !important;
 5.   }
 6. }
 7. @keyframes grow {
 8.   0% {
 9.     stroke-dashoffset: 1px;
10.     stroke-dasharray: 0 350px;
11.     opacity: 0;
12.   }
13.   10% {
14.     opacity: 1;
15.   }
16.   40% {
17.     stroke-dasharray: 350px 0;
18.   }
19.   /* Moving back */
20.   85% {
21.     stroke-dasharray: 350px 0;
22.   }
23.   95%,
24.   to {
25.     stroke-dasharray: 0 350px;
26.   }
27. }
28. path {
29.   stroke-dashoffset: 1px;
30.   stroke-dasharray: 350px 0;
31.   animation: grow 10s ease forwards infinite;
32.   transform-origin: center;
33.   stroke: #303030;
34.   animation-delay: 0s;
35. }

L’unico inconveniente è che il tratto è uniformemente spesso in tutto il logo. Il che lo fa sembrare meno simile a una firma. In questi casi è opportuno modificare tratto a lunghezza variabile, non dal codice appena modificato. In ogni caso, si tratta di un tratto che dovrebbe essere uniforme. Possiamo comunque ritenerci soddisfatti dell’animazione CSS che abbiamo ottenuto. 

Conclusioni

Con questo semplice script puoi iniziare a comprendere come animare un logo partendo dalla base di un SVG. 

Cerca di svolgere degli esercizi CSS per mettere alla prova le tue conoscenze animando anche immagini diverse da loghi all’interno di pagine web, facendo comunicare html&css come due strumenti imprescindibili tra loro. Che aspetti? Mettiti alla prova!

Se vuoi saperne di più sul linguaggio CSS non perdere la nostra guida html e css in italiano!