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