CONTATTACI

Blog

Illustrazione di un developer che attraverso un VR vede pianeti fluttuare

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!

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.