Skills Bar in CSS3

image-skills
Tempo stimato di lettura: 1 minuto, 24 secondi
Pubblicato il 6 febbraio 2013

Nel precedente articolo su quicksand.js su  ti ho mostrato come animare il tuo portfolio lavori e oggi voglio parlarti di come animare le tue competenze “skills” grazie all’uso di “css3 animation” e dei “keyframes” che insieme ci consentono di creare delle animazioni. I keyframes offrono la possibilità di modificare il set di stili css molte volte durante l’animazione, bisogna specificare quando avverrà il cambiamento.

HTML

Il markup usato qui sopra è una semplice lista non ordinata, all’interno della quale ci sono degli <span> con classi diverse e degli <h2> per i titoli delle competenze. Fin qui tutto facile, no?

CSS

Come hai notato ci sono varie classi, che corrispondono alle competenze (html, css, javascript, wordpress) di cui per ognuna ho specificato la larghezza, il background e il tipo di animazione. Il grosso del lavoro lo farà il keyframes con i valori che ho impostato. Come ho detto in precedenza bisogna specificare quando avverrà il cambiamento. I valori del keyframes si possono impostare in percentuale oppure con le parole chiave “from” e “to”, che è praticamente la stessa cosa. Io ho usato le percentuali dove 0% è l’inizio e 100% è la fine dell’animazione. Queste sono le poche, anzi pochissime righe css per dar vita a questa splendida animazione, che darà al nostro portfolio un tocco in più.

Conclusioni

Naturalmente queste proprietà css3 non funzionano su tutti i browser, l’ esempio mostrato funziona egregiamente sulle ultime versioni di Chrome, Firefox e Safari, grazie ai prefissi “-webkit-” e  “-moz-” che ho utilizzato. Con i keyframes si possono creare animazioni davvero fantastiche senza l’utilizzo di alcun plugins. Ora tocca a te sperimentare! Per oggi è tutto alla prossima.

Demo

Shares