Animazioni css e png trasparenti

Girando tra i feed della scorsa settimana mi sono ritrovato a leggere un’articolo molto interessante da proporre anche qui su […]
Animazioni css e png trasparenti

Girando tra i feed della scorsa settimana mi sono ritrovato a leggere un’articolo molto interessante da proporre anche qui su laboratorio: creare effetti animati su icone in formato png trasparente.

Cominciamo!

Ho scaricato un’icona da un qualsiasi sito di icone free e l’ho “bucata” dove mi serviva la trasparenza:


Il gradient

Salvata in formato png trasparente, l’ho successivamente importata in un file html e associato la proprietà gradient nel css, questa applica lo sfondo sfumato alla nostra immagine trasparente:

img{
/* Per i browser non compatibili */
background:#01627f;
background-image: linear-gradient(left, #014458, #01b0be, #01b0be, #014458);

/* Chrome */
background-image: -webkit-linear-gradient(left, #014458, #01b0be, #01b0be, #014458);

/* Firefox 3.6+ */
background-image: -moz-linear-gradient(left, #014458, #01b0be, #01b0be, #014458);

/* Internet Explorer 7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#014458', endColorstr='#01b0be');

Ovviamente ho dovuto ricorrere alle proprietà cross-browser per poterlo visualizzare sui diversi browser.

Chrome e Firefox usano left nelle parentesi per definire la posizione iniziale della sfumatura, e a seguire i valori esadecimali dei colori che la compongono.
Internet Explorer come puoi notare ha una propria configurazione, dove settare il colore iniziale e finale.
Ho testato anche su Safari ed Opera senza ottenere risultati, a quanto pare non sono compatibili con la nuova sintassi linear-gradient. Se avete suggerimenti scrivete pure nei commenti. 😉

Background Size

Il passo successivo è impostare la dimensione del background (sfumatura) con la proprietà background-size, il valore deve essere sempre maggiore dell’immagine in modo tale da poterlo far scorrere al di sotto. Quindi non deve mai essere 100% altrimenti non accade nulla. Nel mio caso l’ho impostato al 150%.

background-size:150%;

La transizione

Ora impostiamo il tipo di spostamento che deve effettuare la nostra sfumatura:

transition: all 0.3s ease-out;

/* Firefox 4 */
-moz-transition: all 0.3s ease-out;

/* Chrome */
-webkit-transition: all 0.3s ease-out;

Ho settato i parametri solo per Firefox e Chrome che a quanto pare al momento sono gli unici browser che la supportano. Comunque, il parametro all è la parola chiave che raggruppa tutte le caratteristiche che possiamo modificare (color; background; border ecc.). Il valore numerico  indica la durata dell’animazione espressa in secondi mentre l’ultima dichiriazione indica  la velocità di spostamento.

Arrivati alla conclusione non ci rimane altro da fare che  impostare lo stato finale dell’animazione quando si va a rollover col mouse:

img:hover {
background-position: -100%;
}

Ora dai spazio alla tua fantasia 😉

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github