Come sfruttare le animazioni CSS3 per realizzare le skills del tuo sito web

Hai mai realizzato le skills per il tuo sito web?

Le skills sono un elemento fondamentale del portfolio di web designer e grafici perché:

  • mettono in evidenza le proprie competenze ed abilità
  • servono a catturare l’attenzione di potenziali clienti.

Da qualche anno, grazie alle nuove specifiche dei CSS3, è sempre più frequente trovare siti web con skills animate.

Ecco alcuni esempi:

Alex Araujo – Visual & UI Designer

skills1

 Jamie Heuze – Visual designer

skills2

William Paige UX/UI Developer

skills3

Grazie alle ultime specifiche dei css siamo in grado di dare un po’ di dinamicità in più ai siti web sfruttando le proprietà delle animazioni in combinazione con le regole dei fotogramma chiave (keyframe rules).

Le animazioni non sono ancora un linguaggio standard e per questo non abbiamo un supporto elevato dei browser. Le prestazioni, comunque, migliorano di anno in anno.

Potete visualizzare il livello di supporto dei browser qui.

Per far sì che le animazioni siano eseguite correttamente dai browser principali, in particolare da quelli che hanno maggior supporto, dobbiamo utilizzare i prefissi proprietari:

  • -moz- per Mozilla,
  • -webkit- per Safari e Chrome
  • -o- per Opera
  • IE supporta le animazioni a partire dalla versione 9

In questo videotutorial vedremo come realizzare un grafico a barra orizzontale che rappresenta le nostre skills e il livello di conoscenza di ogni singola competenza.

Il video è diviso in 5 fasi:

  1. Introduzione
  2. La struttura della pagina
  3. Lo stile generale della pagina e delle skills
  4. Le proprietà delle animazioni
  5. Gli stile dei fotogramma chiave o keyframes.

Potete scaricare la risorsa seguendo il link.

Download

Buona visione!

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Web designer e front-end developer freelance a partire dal 2013 con l'obiettivo di crescere professionalmente e di affrontare nuove ed entusiasmati sfide. Ho studiato graphic design allo IED di Milano ma mi occupo in particolare di disegnare e sviluppare siti web in Html5 + Css3 e jquery, siti web responsive e con effetto parallasse. Amo anche scrivere e per questo ho anche un mio blog personale che trovate sul mio sito-web.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

11 commenti

  1. Andrea
  2. Alberto
    • Alberto
  3. Paolo
  4. Paolo

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *