Abbiamo visto qualche tempo fa come creare un bottone in stile 2.0 utilizzando The Gimp. Il risultato a parere mio era tuttaltro che disdicevole.
L’uso di grandi bottoni oggi è consigliato per mettere l’utente di fronte a qualcosa di chiaro da cliccare, ed allo stesso tempo di gradevole da vedere.
Se vogliamo raggiungere un risultato ancora più efficacie, dobbiamo far vivere il nostro bottone. Facendo si che all’interazione utente corrisponda un’azione anche al solo passaggio del mouse. E difatti ci capita spesso di vedere link testuali che al passaggio del mouse cambiano colore, mutano a volte con semplici effetti in salsa text-decoration, a volte con metodologie più complesse.
Utilizzando un bottone di questo tipo, che vuole spudoratamente richiamare un oggetto 3D, la migliore animazione è quella di far mutare l’oggetto come se si stesse premendo. Dare l’idea dinamica di un interruttore che si può premere favorisce il click su quello che comunque è, e rimarrà, ne più ne meno che un link testuale.
Per prima cosa dobbiamo creare un secondo bottone che ci permetta di ottenere un effetto movimento adeguato. Possiamo sbizzarrire la fantasia con GIMP, ma forse la cosa più facile è quella di applicare la guida sopra linkata, per la creazione di un bottone in stile 2.0, e dopo averlo realizzato e salvato, creare da questo una seconda immagina riflettendo verticalmente quella d’origine.
In sostanza avrete la prima immagine simile a quella che vedete in top a questo articolo, ed una seconda di questo tipo.
Il comando via GIMP viene dato dal menu "Immagine >> Trasforma >> Rifletti Verticalmente".
Adesso dobbiamo giocare un po’ con i CSS per fare in modo che al passaggio del mouse, tramite una direttiva che usi lo pseudoelemento :hover, l’immagine cambi dalla prima alla seconda.
Creiamo la classe adeguata che applicheremo ad un div, uno span, una cella. Qualsiasi elemento html che contenga il bottone che vogliamo far visualizzare e vivere.
.cont{
height:100px;
width:200px;
margin:auto;
margin-top:200px;
padding-top:20px;
background:url(‘bottone.png’) no-repeat;
text-align:center;
}
.cont:hover{
background:url(‘bottone2.png’) no-repeat;
}
Notate subito che l’immagine è usata come sfondo dell’elemento. Quindi per permettere una visualizzazione adeguata devo impostare l’elemento con le stesse dimensioni del tasto. Il no-repeat in questo caso è solo precauzionale.
Il padding impostato agirà solo sul contenuto dell’elemento. Non ha influenza sull’immagine di sfondo. Può essere ignorato in questo caso ed è da considerarsi relativo all’esempio concreto (link a fine post).
La magia sta nella direttiva :hover riportata sotto. Non cambiamo niente della classe se non l’immagine di sfondo. E date le immagini usate l’effetto (almeno tentato 🙂 ) sarà quello di una pressione sul bottone che sembra deformarsi.
La capacità di rendere veritiero l’effetto sta nella bontà delle due immagini di essere diverse, ma complementari.
Questo approccio funziona perfettamente, ma sconta una inefficienza di base: dover caricare due immagini e constringere il client a due chiamate http per uno stesso elemento testuale.
In realtà esiste un modo migliore per ottenere lo stesso risultato e non costringere al caricamento di due file. Ma questo lo vedremo domani che mi andrà di scrivere 🙂