Bottoni rollover facili col CSS

Per chi ancora usa Javascript per inserire bottoni in rollover all’interno delle proprie web application illustro questo metodo CSS semplice ma molto funzionale.
I vantaggi rispetto all’uso del Javascript sono il funzionamento sui browser con Javascript disabilitato, implementazione velocissima, migliore leggibilità del testo da parte del browser e dei motori di ricerca e notevole risparmio di tempo nel caso vogliate cambiare o eliminare l’effetto in seguito.

COME FUNZIONA

Il CSS rollover in questione si serve di immagini in background e dell’evento :hover del tag <A>.
Un’immagine, contenente sia il disegno di rollout che di rollover, viene usata come background mostrando solo la prima porzione, quella di rollout: passando l’utente sopra all’immagine col mouse viene spostata la posizione del background e visualizzata la porzione di rollover, creando l’effetto.
Capirete ancora meglio vedendo lo script alla fine della pagina.

CREIAMO L’IMMAGINE

Come detto prima, avremo bisogno di un’unica immagine divisa in 2 porzioni, le quali dovranno essere della stessa grandezza in pixel.

Quindi creiamo prima l’immagine di rollout, quando l’effetto non è attivo: come al solito userò il logo del sito.
Apriamo Photoshop (nessuno comunque ci vieta di usare altri programmi di grafica ma questo tutorial illustra anche qualche comando del programma Adobe :) ) e la nostra immagine, premiamo Ctrl+R (o se preferite cliccate su View->Rulers) per attivare il RULER, il righello, che ci servirà per centrare al massimo il bottone, blocchiamo il suo livello selezionandolo dalla palette dei livelli e quindi cliccando sul lucchetto, selezionamo il livello di background, torniamo all’immagine e clicchiamo con il pulsante sinistro tenendo premuto sui numeri del righello a sinistra per creare una GUIDA, spostiamola fino al centro dell’immagine, dovreste sentire che si posiziona da sola (questo perchè il programma ci aiuta a posizionarle al centro) quindi rilasciate il pulsante del mouse.
Eseguite la stessa operazione creando una guida verticale cliccando sul righello in alto.
Ora riselezionate il livello con il bottone, togliete il lucchetto, posizionatelo più o meno al centro servendovi delle guide.

Ora premete Ctrl+Alt+C (oppure cliccate su Image->Canvas Size…), segnatevi altezza e larghezza che ci serviranno per il CSS, posizionate l’anchor (l’ancora) a sinistra cliccando sulla freccia a sinistra, quindi raddoppiate l’ampiezza, nel mio caso passerò da 150 pixel a 300, e cliccate OK.
La parte vuota a destra conterrà il nostro effetto di rollover.

Nel mio caso ho semplicemente cliccato sul bottone e sullo sfondo e tenendo premuto Alt ricliccato per duplicare i livelli, poi ho spostato il nuovo livello nella parte a destra, che è la perfetta dell’immagine intera, occupandola tutta.
Le guide ormai non ci servono più quindi possiamo anche toglierle cliccandoci sopra e riportandola sopra il righello.

Per creare un effetto di luminosità al passaggio del mouse, ho semplicemente cambiato i colori del logo usando i Gradient Map, li trovate cliccando su Image->Adjustments->Gradient Map…, voi potete utilizzare gli effetti che preferite, tipo un effetto di Blur in rollout che va via in rollover o del bagliore, dato spazio alla vostra creatività!

Ora l’immagine è pronta, possiamo salvarla in gif, jpg o png e tornare a lavorare sulla nostra pagina.

E ORA IL CODICE…

Per far funzionare questo trucco, ogni bottone deve avere un <div> parent del tag <a> ossia un div che contiene il nostro link.
L’immagine non viene caricata sull’HTML, sarà il CSS ad assegnare al div lo sfondo che ci serve.
Al div verrà data la proprietà class=button_ex.
Ecco il codice da inserire nella pagina:

La parte più importante sta nel CSS, il nostro foglio di stile, dove andremo ad inserire questo codice:

Come avviene la magia?
Prima dichiariamo il tag <A> come "block", altrimenti non siamo in grado di assegnare altezza e larghezza essendo un elemento inline con dimensioni pari al contenuto, poi assegniamo sia al tag <DIV> che al tag <A> le dimensioni che ci siamo segnati prima, che corrispondono a metà dell’immagine.

Infine la parte più importante: sull’evento :hover del tag <A> cambiamo la posizione del background da left a right creando l’effetto al passaggio del mouse.

Una volta realizzata questa tecnica possiamo implementarla chiudendo i tag <A> all’interno di <DIV> con classe button_ex ed eliminare o cambiare poi l’effetto modificando solo le linee del css, a differenza del Javascript dove avremmo dovuto cercare tutti i link nelle nostre pagine.
In questo caso ho utilizzato uno sfondo con una scritta, ma credo che l’uso che ne farete voi sarà quello di creare sfondi standard per i vostri bottoni dove la scritta sarà il testo del tag <A>.
Se poi questa spiegazione vi offrirà spunto per nuove cose o effetti non mancate di segnalarmele commentando su questo sito :)

Ecco l’effetto finale nella sua semplicità ed immediatezza.

Ritieni questo post utile o interessante?
Condividi e Segnala

Leggi anche:

• » Nuovi font senza riavviare Photoshop
• » CORNICI ORIGINALI E DI EFFETTO IN PHOTOSHOP IN POCHI SECONDI
• » Layout liquido: CSS box espandibili con una sola immagine

dei commenti - lascia un commento - trackback