[CSS] Un bottone vivo ed efficiente

Giusto ieri abbiamo visto come rendere alcune immagini quasi vive, utilizzando GIMP per progettare i file png ed un po’ di CSS per dare quel effetto tanto gradito – o almeno così sembra – dall’utenza.

Ma proprio sul finire dell’articolo si disse quanto la soluzione che vedeva l’uso di due immagini intercambiabili fosse poco efficiente. Due file si risolvono in due chiamate http. Due file spesso fanno si che al primo :hover l’effetto non sia immediato, dato che la seconda immagine non è ancora in cache.

Per ovviare al problema, basta ragionarci un po’ e ristrutturare il tutto per l’uso di una sola immagine.

Come prima cosa dobbiamo creare con the GIMP un solo file contenente entrambe le immagini. Apriamo il nostro fido editor di immagini e creiamo una nuova immagine che abbia la stessa larghezza dell’immagine di default, ma il doppio della lunghezza. Nel nostro caso la nuova immagine sarà 200X240.

Posizioniamo verticalmente le due immagini, di modo tale che la parte bassa di quella di default, sia tangente alla parte alta dell’immagine della direttiva :hover.

Diamo il nome che vogliamo alla nuova immagine. E riscriviamo come di seguito le direttive di CSS.

.cont{
height:100px;
width:200px;
margin:auto;
margin-top:200px;
padding-top:20px;
background:url(‘bottoneunico.png’) no-repeat;
text-align:center;
}

.cont:hover{
background-position:0px -120px;
}

Spiegiamo brevemente. L’elemento target ha un’altezza di 100px, che grazie al padding-top diventa nei fatti 120. L’immagine di sfondo invece è esattamente il doppio. Quindi il browser visualizzerà i primi 120 px di altezza del file bottoneunico.png.

La direttiva :hover (che ricordiamo, regola il comportamento nel momento in cui si passa con il mouse sopra l’elemento) è settata con un semplice background-position. Grazie a questa direttiva riesco a far abbassare di 120px l’immagine di background. In questo modo visualizzerò i 120px dal basso dell’immagine di sfondo.

Vantaggi? Una sola immagine caricata e nessun tempo di attesa per il loading della direttiva :hover in quanto non richiama un nuovo file, ma semplicemente visualizza in maniera differente una immagine già in cache.

Semplice, ma efficacie. E come sempre ecco un esempio concreto, che da lo stesso identico effetto di quello visto nel post precedente, ma implementa la diversa tecnica di cui sopra.