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!

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:

  • Guida CSS3: i font – parte prima

    Bentrovato a questo nuovo appuntamento con la guida CSS3! Quest’oggi affronteremo un tema fondamentale: l’utilizzo di font, predefiniti e...

  • Guida CSS3: ereditarietà

    Bentrovato ad un nuovo appuntamento con la guida CSS3! Nel corso di questo articolo ci soffermeremo su un aspetto fondamentale che condiziona...

  • Selettore :not
    Guida CSS3: pseudo classi e pseudo elementi

    Bentrovato a questo nuovo articolo della guida CSS3! Come preannunciato nel capitolo precedente, quest’oggi ci occuperemo di pseudo classi e pseudo...

12 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo