Riciclare e animare le icone con i CSS
In un passato non molto lontano, stavamo imparando a conoscere le tecniche rivoluzionarie per salvare le richieste HTTP e le KB attraverso l'uso degli sprite delle immagini. Questi sprite consistevano in decine o addirittura centinaia di icone disposte in un file immagine che è stato successivamente unito e servito in vari modi attraverso un sito web.
Abbiamo fatto buon uso della tecnica e praticamente ogni sito interessato alla scalabilità lo utilizza.
Grazie all'avvento delle proprietà Transform and Transition di CSS3, possiamo fare un ulteriore passo avanti e utilizzare poche righe di codice concise, trasformare i modelli di icone di base in nuove icone per uso futuro e persino lanciare l'animazione nel mix per un ulteriore bonus !
La tecnica è semplice e intuitiva come lo sprite delle immagini e consente di utilizzare rapidamente nuove icone senza dover modificare gli sprite delle immagini.
Riciclando le icone con i CSS
Dai uno sguardo a questo sprite preso dalla libreria dell'interfaccia utente jQuery. Mentre navighi, noterai che molte delle icone elencate qui sono in realtà delle varianti sui modelli di base. Una singola icona può essere rappresentata in una dozzina di modi diversi e inserita nello stesso file. Molte icone sono letteralmente versioni ruotate dei loro genitori. La buona notizia è che mentre utilizziamo i CSS possiamo usare la stessa identica tecnica senza dover includere le variazioni nello sprite dell'immagine.
Dall'esempio sopra, possiamo prendere una singola icona e ricrearla per i nostri scopi, ad esempio un semplice chevron dalla seconda riga in basso. Con la proprietà transform, siamo in grado di ruotare questo chevron 45deg, 90deg, 180deg, ovviamente e indefinitamente per creare molte forme diverse dallo stesso modello.
Modello base (freccia su):
Il seguente codice tirerà la chevron verso l'alto dallo sprite dell'immagine e servirà come modello base.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Crea il giusto arr ow
Trasformando la nostra freccia a 90 gradi punteremo la freccia a destra, come mostrato di seguito:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Crea una freccia in alto a destra
Ruota solo 45 gradi e ottieni una piccola freccia in alto a destra:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
È così semplice. Usando questo metodo, possiamo iniziare con una semplice icona di due sprite, e con pochissimo sforzo creare sei volte più icone da usare nella nostra interfaccia, che ovviamente è solo l'inizio di ciò che può essere fatto.
Alcune trasformazioni, qualche posizionamento di fantasia e la nostra famiglia di icone è cresciuta un bel po '!
Aggiungere animazione al mix
Per un'esperienza killer, possiamo aggiungere animazione al mix. Non solo trasformeremo le icone, le passeremo per rendere visibile la trasformazione all'utente. Diamo un'occhiata a un altro esempio, iniziando con il segno più visto sopra.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Una semplice rotazione a 45 gradi trasformerà la nostra icona plus in un'icona a portata di mano.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Ora che la nostra trasformazione sta funzionando correttamente, possiamo aggiungere una transizione al mix. Immagina di avere una funzione sul tuo sito per condividere la pagina corrente attraverso una varietà di social network. Facendo clic sull'icona più si aprirà l'elenco delle opzioni di condivisione e mentre l'elenco si apre, le transizioni più in un'icona di chiusura attraverso un'animazione sottile. La migliore implementazione che ho trovato per questo è sull'app per iPad di FontBook. Controlla la loro implementazione:
È stellare. Diamo un'occhiata a come rendere questa bellezza prendere vita. Inizia utilizzando la nostra icona più creata sopra. Per animarlo, aggiungi semplicemente la proprietà di transizione alla tua icona. Nella nostra transizione, specifichiamo la proprietà (transform), la durata (0.2s) e infine quale funzione di timing vogliamo usare (lineare).
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}Di nuovo, è così semplice. Non solo possiamo creare nuove icone per la nostra libreria con solo CSS, possiamo animare e dare vita a qualsiasi elemento particolare!
Usando l'opacità per più varietà
L'ultimo pezzo di riciclaggio di icone viene a giocare sotto forma di proprietà di opacità. La duplicazione delle icone principali per il bianco e nero ti consentirà di generare un numero infinito di sfumature / varianti da utilizzare in tutto il tuo sito o applicazione.
Una variante a quattro immagini (come visto di seguito) dello sprite qui sopra potrebbe essere facilmente utilizzata per creare una dozzina di volte più icone, e aumentando o diminuendo l'opacità è possibile posizionarle ovunque sia necessario e mantenerle comunque in bella mostra.
È ora di diventare ecologici: riciclare con i CSS
Come CSS3 ha guadagnato la trazione, la mia copia di Photoshop CS5 ha iniziato a raccogliere polvere, e per una buona ragione! Questa tecnica di riciclaggio delle icone ti consente di distribuire continuamente nuove versioni e varianti alle tue interfacce senza dover aprire file di origine e aggiungere icone ingombranti a sprites in continua espansione.
I tempi di manutenzione diminuiscono e il tuo tempo trascorso a leggere libri come la settimana lavorativa di 4 ore sale! È tutto oro.
Ovviamente il lato più ovvio di tutto questo è il supporto del browser, tuttavia, con la recente spinta da parte di tutti i browser moderni, potremo sfruttare nuove ed entusiasmanti tecniche progressive. Sentiti libero di sfoglia qualche esempio di questa tecnica.
In quali altri modi sei stato in grado di riciclare le risorse del tuo sito web?