
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Creare pulsanti graficamente accattivanti a partire da semplici link grazie ai CSS
Abbiamo parlato in diverse occasioni di rollover grafico, ad esempio nella serie Menu grafici con rollover e preload via CSS e nell’articolo Grafica per blog con i CSS.
In questo appuntamento riprenderemo le basi della tecnica, presentando un semplice esempio, costituito da un solo link. Si tratta di un ottimo modo per rendere graficamente piacevole un link importante della pagina, quei link che veicolano funzionalità del tipo:
In generale si tratta quindi di link presenti nei siti che offrono prodotti e/o servizi, e un singolo link ben visibile e ben presentato può fare la differenza determinare, o quanto meno favorire, il click da parte dell’utente.
Vedremo qui come sia possibile attraverso una singola immagine trasformare un semplice link testuale, che in assenza di CSS si presenta così:
In un link decisamente accattivante e funzionale, presentato in questo modo:
Cominciamo così presentando l’esempio di base,
un semplice link-bottone con grafica e CSS. Il markup è il più semplice possibile:
si tratta di un solo link con class="button"
, che potrà essere
inserito come ultimo elemento di un paragrafo oppure all’interno di un div, come
nel caso dell’esempio. Qui di seguito l’unica immagine di sfondo utilizzata
nell’esempio:
Il CSS è costituito da due sole regole: una per lo stato normale del link,
e uno per lo stato :hover
. In sostanza si tratta di:
display:block
così da potergli attribuire le dimensioniIn fase :hover
basterà definire un colore del testo più acceso, così da
accompagnare il passaggio del mouse. Vediamo per intero le due regole:
a.button{display: block;width: 145px;height: 35px;
margin: 1em;text-decoration: none;text-align: center;
font: bold 18px/35px “Trebuchet MS”,Arial,sans-serif;
background: url(bottone.png);color: #286C98}
a.button:hover{color: #0D4B72}
Da evidenziare che per la centratura orizzontale è bastato dichiarare
text-align:center
, mentre per quella verticale è sufficiente
specificare l’altezza di linea nello shorthand font
(indicata da /35px nel codice sopra) pari all’altezza del link.
Bastano una semplice immagine e due sole regole CSS per rendere accattivante il nostro link-bottone. Ma si può fare di più, rendendolo ancora più piacevole e funzionale grazie al rollover.
Nel secondo esempio viene quindi aggiunto all’esempio di base il rollover grafico: al passaggio del mouse il nostro link-bottone cambia colore di sfondo, come nello screenshot allegato:
L’effetto è ottenuto grazie al fast CSS rollover di cui abbiamo parlato
in questa pagina
della serie Menu grafici con rollover e preload via CSS.
La modifica sostanziale rispetto all’esempio di base è inanzitutto grafica: si
tratta infatti di combinare in un’unica immagine lo stato normale e lo stato :hover
. Ecco l’immagine
di sfondo dell’esempio:
Il principio su cui si basa il fast CSS rollover è semplice ed efficace: in sostanza
si combinano i due stati del link in un’unica immagine e si agisce sulla posizione
dell’immagine di sfondo ottenendo così un rollover istantaneo senza la necessità
di caricare un’immagine aggiuntiva per la transizione sul passaggio sulla fase :hover
.
Nel caso dell’esempio le due porzioni dell’immagine sono ciascuna 145 per 35px, basterà traslare quindi in fase hover verso l’alto l’immagine di background. Ecco le due regole CSS:
a.button{display:block;width: 145px;height: 35px; margin: 1em;
font: bold 18px/35px “Trebuchet MS”,Arial,sans-serif;
text-align:center;text-decoration: none; color: #286C98;
background: url(bottone2.png) no-repeat 0 0}
a.button:hover{background-position:0 -35px;color: #98286C}
Da notare le due coordinate del background-position
sulla seconda
regola: il primo numero (lo zero) indica la posizione sull’asse orizzontale, mentre
il secondo quella verticale. Un valore negativo corrisponde ad una traslazione verso
l’alto, che mostrerà quindi in fase :hover
la porzione di immagine corrispondente.
Il secondo esempio che abbiamo appena visto è semplice ed efficace, ma soffre del flickering, un problema che affligge Internet Explorer 6. In sostanza il flickering è un problema causato cambiamento del background-position, che provoca una latenza di rollover e in alcuni casi il ricaricamento dell’immagine con conseguente inutile trasferimento di dati dal server. Questo ritardo nel rollover è inoltre piuttosto fastidioso per l’utente.
Il modo più semplice per risolvere il flickering di IE6, come abbiamo fatto in diverse occasioni qui negli articoli di HTML.it, è bufferizzare la porzione di immagine in fase :hover sul contenitore del link, che è tipicamente un elemento di lista o un div.
Se è vero che da Novembre 2006 è uscito IE7, è anche vero che IE6 è ancora piuttosto diffuso, e ad oggi (fonte w3Schools) conta una percentuale di poco inferiore al 40%.
Tornando al flickering, quello che vorremmo è però una soluzione che non presenta
vincoli implementativi e in particolare che non necessiti di elementi aggiuntivi
nel markup. Ci sono diverse soluzioni alternative, molte delle quali vengono
presentate in Minimize flickering css background images in ie6.
Tra le tante, la soluzione da preferire è forse Caching in IE,
non richiede la interventi sul CSS ma solo sul file .htaccess
.
Una soluzione alternativa basata invece su Javascript è stata presentata di
recente in questa
pagina. Vediamo quindi il terzo esempio, ispirato proprio da quest’ultima
soluzione. Il CSS è identico al secondo esempio, l’unica aggiunta riguarda un piccolo
file Javascript linkato nella sezione head
della pagina attraverso il commento
condizionale. Ecco la riga aggiuntiva:
<!–[if IE 6]> <script type=”text/javascript” src=”fixflicker.js”></script><![endif]–>
Il file fixflicker.js
è decisamente breve, ecco il suo contenuto:
try {
document.execCommand(“BackgroundImageCache”, false, true);
} catch(err) {}
Nel terzo esempio abbiamo visto come sia possibile ovviare al flickering di IE6 con un piccolo script: ma c’è una questione… non tutti gli utenti hanno Javascript abilitato, anche se si stima che all’incirca il 95% lo abbia.
C’è un’altra alternativa, un po’ più radicale forse, ma che non richiede Javascript nè modifiche
e/o aggiunte nella sezione head
della pagina. Ecco quindi il quarto esempio,
in cui si esclude il rollover su IE fino alla versione 6 inclusa.
Si avrà quindi il rollover
grafico su IE7, Opera, Firefox e Safari, mentre su IE6 e IE5.5 il passaggio :hover
interverrà
solo sul colore del testo. Ecco quindi le tre regole CSS dell’esempio:
a.button{display:block;width: 210px;height: 35px; margin: 1em;
text-align:center;font: bold 18px/35px “Trebuchet MS”,Arial,sans-serif;
text-decoration: none; color: #286C98;
background: url(bottone4.png) no-repeat 0 0}
a.button:hover{color: #0D4B72} /*per IE fino alla versione 6*/
html>body a.button:hover{background-position:0 -35px;color: #98286C} /*per gli altri browser*/
Da notare quindi che la terza regola è rivolta solo ai browser capaci di interpretare il child selector
(simbolo di maggiore) escludendo quindi IE fino alla versione 6.
Abbiamo visto in questo appuntamento alcune soluzioni per ottenere un link grafico con rollover attraverso diversi esempi, trattando anche alcune strategie per risolvere il flickering di IE6. La compatibilità degli esempi è buona: sono stati testati con successo sulle versioni di IE dalla 5 alla 7, oltre che sulle ultime versioni di Firefox, Opera e Safari.
Da notare in conclusione che gli esempi usano quattro immagini diverse, lunghe abbastanza
da contenere il testo al loro interno. Si potrebbe ottenere una soluzione più flessibile
con l’aggiunta di uno span
all’interno del link, come abbiamo fatto ad esempio nell’articolo
menu con tab grafiche,
a cui rimando la lettura per eventuali approfondimenti. Da notare infine che le tecniche qui
viste possono essere applicate per creare bottoni grafici per i form, come abbiamo fatto
ad esempio nell’articolo Form grafico con i CSS.
Codice e immagini sono disponibili per il download. Alla prossima.
Se vuoi aggiornamenti su Bottoni con rollover inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
iBlio e Cosma serrano il loro sodalizio per presentare Iot Semplice, ne parliamo con Valter Foresto
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
LiteDB è un database embedded NoSQL, comodo da utilizzare in progetti .NET di piccole dimensioni: ecco come utilizzarlo con C#.
Nel campo delle applicazioni mobile e Web la separazione fra backend e frontend è netta: la gestione dell’interfaccia è delegata […]
Con l’uscita della versione 3.0, KDE (discorso simile va fatto per GNOME) è riuscito a raggiungere un livello di usabilità […]
La guida alle opzioni di base di HitFilm Express, il software per l’editing video con molte funzioni di stampo professionale.