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
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:
- Introduzione
- La struttura della pagina
- Lo stile generale della pagina e delle skills
- Le proprietà delle animazioni
- Gli stile dei fotogramma chiave o keyframes.
Potete scaricare la risorsa seguendo il link.
Buona visione!
12 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo