
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Tecniche e soluzioni per ottenere effetti rollover efficaci e graficamente accattivanti
Il rollover grafico è uno degli aspetti fondamentali del web design ed è un argomento che abbiamo trattato in moltissimi articoli qui sulla sezione CSS: a partire dall’ormai datata serie (ma a parer mio sempre attuale) dedicata ai menu grafici con rollover e preload, passando per gli spotlight con i CSS, ai bottoni flessibili con rollover fino ad arrivare alle sperimentazioni con il menu gloss con i CSS e JQuery solo per citarne alcuni. Manca però in questa sezione un articolo che sia totalmente incentrato su un concetto così imporante: in questo appuntamento faremo una sorta di riepilogo esplorando le diverse soluzioni pratiche che ogni web designer e/o appassionato avrebbe bisogno di conoscere. Sarà inoltre un ottimo modo per raccogliere in unico articolo i casi più rappresentativi di rollover.
Prima di cominciare, è importante fissare un concetto. Ci sono alcuni elementi di una pagina che hanno una predominanza di utilizzo per la loro natura: l’header, il menu, le foto e i bottoni, ovvero tutti quegli elementi ipertestuali che non sono semplici link di testo. È importante accompagnare ogni passaggio su link con una transizione che sia visivamente percettibile, così da far capire all’utente un potenziale cambiamento di stato o pagina. Lo è ancora di più per gli elementi che abbiamo appena citato e la loro natura squisitamente grafica è un ottimo spunto per arrichire l’esperienza di navigazione dell’utente. Vedremo qui come sia possibile farlo tecnicamente nel migliore dei modi. Cominciamo.
Cominciamo questa serie con un semplicissimo esempio: un link-bottone con rollover, ottenuto con
una semplice classe "button"
attribuita sul link (<a class="button">..</a>
).
La grafica che caratterizza l’esempio è costituita da due immagini di sfondo distinte: una per lo stato a riposo del bottone
e una per lo stato hover, su cui viene poi sovrapposto il testo del bottone.
Il CSS dell’esempio è piuttosto semplice: si tratta di rendere il link block-level, per poi attribuire dimensioni, altezza di linea e centratura del testo al link, insieme alle proprietà sul testo. Vediamolo per intero:
a.button{display: block;width: 100px;height: 30px;
margin: 5em;text-decoration: none;text-align: center;
font: 11px/30px Arial,sans-serif;
background: url(buttongray.png);color: #666}
a.button:hover{color: #444;background: url(buttondark.png)}
Concentriamoci per ora sul meccanismo di rollover, e in particolare sulle due dichiarazioni chiave che corrispondono ai due sfondi per i due stati:
a.button{background: url(buttongray.png)}
a.button:hover{background: url(buttondark.png)}
In stato normale viene attribuita l’immagine per il bottone un po’ più tenue, per poi mostrare in fase “hover” lo sfondo più acceso così da accompagnare il rollover. Quello che succede in questo caso è che però al primo caricamento di pagina e sul primo passaggio del mouse si verifica una latenza percettibile anche con la più veloce ADSL. Questo perchè il browser interpreta il CSS e richiede la seconda immagine di sfondo al bisogno, cioè solo in fase hover. Questa latenza sparisce in passaggi successivi al primo e visite seguenti, fintanto che l’immagine per la fase :hover resta nella cache del browser.
Sebbene questa latenza sia in alcuni casi accettabile (per esempio per poche immagini e di piccole dimensioni) sarebbe meglio evitarla per poter offrire in ogni contesto un’esperienza di navigazione fluida per i nostri visitatori. Chiameremo questo tipo di rollover che prevede due (o più) immagini distinte rollover disgiunto.
Personalmente, ritengo che adottare un rollover disgiunto come nel caso dell’esempio sia una scelta implementativa poco professionale il più delle volte. C’è però un caso in cui il rollover disgiunto è accettabile, e sarà il nostro prossimo caso.
Prima di procedere, ci tengo a citare gli approfondimenti sulla creazione di bottoni grafici con i CSS: Bottoni con rollover, Bottoni con rollover flessibili e Bottoni gloss con Gimp e Inkscape.
Il nostro secondo esempio è un classico menu a tab semigrafiche in cui la tab corrente e quella in fase hover vengono mostrate aperte: anche in questo caso ogni singolo link può assumere due distinte immagini di sfondo.
Ora vediamo il CSS per intero:
div#menu { padding:150px 0 0 0; background:#CCC } div#menu ul { width:100%; height:30px; list-style: none; margin:0; padding:0; background:url(line.png) repeat-x bottom } div#menu ul li { float:left; margin: 0 0 0 5px; padding: 0 } div#menu ul a { float:left; width:100px; height:30px; line-height:30px; background:url(tab-c.png); text-decoration:none; color:#555; text-align:center } div#menu ul a.active, div#menu ul a:hover { background: url(tab-n.png) } div#menu ul a.active{ color:#000
Il CSS non è particolarmente difficile e riprenderemo in seguito gli approfondimenti per la creazione del menu. Vale la pena di focalizzarsi anche in questo caso sulle due immagini utilizzate e le dichiarazioni che le impiegano:
div#menu ul a { background: url(tab-c.png) } div#menu ul a.active, div#menu ul a:hover { background: url(tab-n.png) }
Come si può notare l’immagine per lo stato hover è dichiarata anche per il link attivo (con classe "active"
nell’HTML) cosicché al caricamento della pagina entrambe le immagini per i due stati dei link risultano caricate. In questo caso quindi non si verificherà latenza nella fase di rollover, dato che l’immagine corrispondente risulterà già nella cache del browser.
Questo è comunque un caso particolare, dato che lo stato attivo e quello hover utilizzano la stessa immagine di sfondo (anche se vengono visivamente differenziati dal colore del testo). Quello di cui abbiamo bisogno è un approccio generale per avere rollover veloci e funzionali in tutti i casi. Sarà argomento del prossimo esempio. Ma prima, ecco gli approfondimenti sulle tab grafiche: Menu con tab grafiche, Tab grafiche centrate e Interfacce a tab con CSS e Javascript.
Presentato ormai cinque anni fa per la prima volta su HTML.it in questa pagina della serie Menu grafici con rollover e preload via CSS, il Fast CSS Rollover è tuttora la tecnica più efficace ed utilizzata per ottenere rollover istantanei e funzionali.
L’idea di base è semplice: combinare due (o più) stati dei link in un’unica immagine, per poi intervenire sulla proprietà background-position
e mostrare la porzione dell’immagine necessaria per un dato stato.
Un simile approccio presenta molteplici vantaggi:
Detto ciò, possiamo senza indugio presentare l’esempio: un semplice menu a due stati con rollover che impiega proprio il Fast CSS Rollover. Per prima cosa, vediamo l’immagine che viene usata come sfondo per le singole voci del menu:
Si può notare che essa racchiude i due stati del menu: la parte superiore indica lo stato normale,
mentre la parte inferiore è quella corrispondente alla fase hover. Come abbiamo detto prima, si tratta
a questo punto di giocare con background-position
, tenendo presente che questa proprietà accetta coppie di valori coordinata-x coordinata-y
e valori negativi avranno l’effetto di traslare lo sfondo verso l’esterno
dell’elemento che lo contiene. In particolare, un valore negativo sulla coordinata x corrisponde a una
traslazione dello sfondo verso sinistra, mentre un valore negativo sulla y causerà una traslazione verso
l’alto. È proprio quest’ultima nozione che ci serve allo sviluppo del nostro esempio, e
rimando all’articolo Posizionare il background per approfondimenti sulla proprietà
background-position
. Vediamo a questo punto il CSS dell’esempio per intero:
div#menu{padding: 150px 0 0 0;background: #666}
div#menu ul{width: 100%;height: 30px;list-style: none;
margin: 0;padding:0;background: url(applebk.png) repeat-x bottom;
font:14px “Lucida Grande”,”Lucida sans”,Lucida,Arial,sans-serif}
div#menu ul li{float: left;margin: 0;padding: 0}
div#menu ul a{float: left;width: 150px;height: 30px;line-height: 30px;
background: url(menu.png) no-repeat 0 0;text-decoration: none;
color: #555;text-align: center}
div#menu ul a:hover{background-position: 0 -30px;color: #FFF}
Anche in questo caso, le regole che ci interessano ai fini del rollover sono quelle che riguardano i link. Vediamo le dichiarazioni chiave:
div#menu ul a{background: url(menu.png) no-repeat 0 0}
div#menu ul a:hover{background-position: 0 -30px}
Per quanto riguarda il rollover dell’esempio, bastano quindi due semplici dichiarazioni: Per stato normale dei link viene dichiarata l’immagine di sfondo e positionata nell’angolo in alto a sinistra, mentre per la fase hover questa viene traslata verso l’alto così da mostrare la sua porzione corrispondente. Il numero di stati grafici dei link si può estendere con lo stesso principio: è il caso del prossimo esempio.
Il nostro secondo esempio che impiega il fast CSS rollover non è altro che un’estensione di quello che abbiamo appena visto: si possono differenziare ulteriormente gli stati grafici dei link così da avere un menu ancora più ricco. Vediamo l’immagine che compone l’esempio:
Dall’alto verso il basso, abbiamo in un unica immagine i quattro stati possibili grafici dei link del menu:
Basta a questo punto regolare la proprietà background-position
per visualizzare
i quattro possibili stati. Ecco il codice interessato:
div#menu a{background: url(menu2.png) no-repeat 0 0}
div#menu a:hover{background-position: 0 -30px;color: #FFF}
div#menu ul a.current{background-position: 0 -60px;color: #000}
div#menu a:active{background-position: 0 -90px}
Un approccio simile rende il nostro menu piacevole e funzionale: l’utente distingue subito il link alla pagina/sezione corrente, c’è un rollover istantaneo sugli altri link e quando essi vengono premuti diventano graficamente ancora più marcati.
I due ultimi esempi appena visti hanno però una limitazione intrinseca: i link dovranno essere a larghezza determinata e pari a quella delle immagini di sfondo. Questo limite si può superare con un piccolo accorgimento. Sarà il prossimo argomento e lo affronteremo nella seconda parte dell’articolo
Se per questioni di design si volessero realizzare link grafici che siano auto-adattanti in larghezza, il concetto del Fast CSS Rollover si può estendere facilmente a questa necessità. Due esempi eccellenti a tal proposito sono i Bottoni con rollover flessibili e le Menu con tab grafiche che riprenderemo brevemente in questo articolo.
Cominciamo con l’esempio con il bottone flessibile: in questo caso un link ha l’aspetto di un bottone con altezza determinata e larghezza necessaria al testo, e presenta un accattivante effetto rollover. Cominciamo con l’immagine di sfondo utilizzata:
Da notare il markup usato nell’esempio: all’interno del link vi è uno span
che ci consente
di ottenere un aggancio grafico, indispensabile ai fini della tecnica. Lo span, ricordo, è un
elemento inline e totalmente neutro che non intacca contenuti né presentazione di default dei link.
Questo aggancio grafico ci consente di poter assegnare due porzioni dell’immagine (ovvero agli estremi, superiore
o inferiore) e di avere lo sfondo che si adatta al contenuto. Rimando all’articolo
Bottoni con rollover flessibili
per approfondimenti sulla costruzione grafica, ecco il CSS dell’esempio per intero:
a.button{float: left;height: 35px;padding-left: 18px;
font: bold 150%/35px “Lucida Grande”,”Lucida sans”,Lucida,Arial,sans-serif;
background: url(bottone2.png) no-repeat top left;
text-decoration: none;color: #FFF}
a.button span{display: block;padding-right: 18px;
background: url(bottone2.png) no-repeat top right;
cursor:pointer}
a.button:hover{background-position: left bottom}
a.button:hover span{background-position: right bottom}
Da evidenziare l’uso delle keyword top, right, bottom e left
invece
che le coordinate in pixel dell’esempio precedente: in questo caso si rivelano pratiche
nonchè indispensabili.
L’idea del rollover flessibile sul nostro bottone si può estendere facilmente a un menu, in cui ciascuna delle voci occupa la larghezza necessaria al contenuto più un eventuale padding per questioni grafiche. Nell’articolo Menu con tab grafiche abbiamo usato un rollover disgiunto, ma ci si può spingere oltre utilizzando un’unica immagine. Ecco quindi la nuova versione del menu con tab adattanti, di cui riporto uno screenshot:
L’immagine di sfondo che compone l’esempio rappresenta una voce del menu e combina i due stati: nella parte superiore abbiamo lo stato normale, che include una linea al fondo; nella parte inferiore c’è la porzione corrispondente alla tab aperta o in fase hover.
Per quanto riguarda il markup, anche in questo caso è necessario uno span che contiene il testo dei link per le ovvie necessità grafiche. Il CSS è invece piuttosto semplice, e sono poche le modifiche rispetto all’esempio con rollover disgiunto che abbiamo visto in apertura di articolo. Ecco il codice per intero:
div#menu{padding: 150px 0 0 0;background : #DFDFDF}
div#menu ul{width: 100%;height:30px;list-style: none;
margin: 0;padding:0;background: url(line.png) repeat-x bottom}
div#menu ul li{float: left;margin: 0 0 0 5px;padding: 0}
div#menu ul a{float: left;height: 30px;line-height: 30px;padding-left: 20px;
background: url(tab-2.png) no-repeat top left;text-decoration: none;color: #555}
div#menu ul a span{float: left;height: 30px;line-height: 30px;
padding-right: 20px;cursor: pointer;
background: url(tab-2.png) no-repeat right top}
div#menu ul a.current,div#menu ul a:hover{
background-position: left bottom}
div#menu ul a.current{color: #000}
div#menu ul a.current span,div#menu ul a:hover span{
background-position: right bottom}
Anche in questo caso l’idea del fast CSS rollover si può estendere su un numero di stati superiori a due: quello che ho notato è che però alcuni browser non supportano bene l’uso congiunto di keyword e pixel per il posizionamento delle immagini. Una possibile soluzione potrebbe essere quella di utilizzare due immagini di sfondo e combinare due stati per ogni immagine, assicurandoci però che il menu in stato di riposo sfrutti entrambe le immagini. Una sorta di mix tra rollover disgiunto e fast CSS rollover quindi. Una possibile alternativa è realizzare link totalmente grafici, che includano quindi anche il testo nell’immagine stessa. Sarà il prossimo argomento.
Il fast CSS rollover per la sua natura grafica si presta benissimo a ulteriori possibilità, e combinato con l’image replacement consente di rimpiazzare testo con elementi grafici che dispongano di un rollover instantaneo. Per quanto riguarda l’image replacement, ecco le risorse disponibili qui su HTML.it:
Vediamo ora il nostro prossimo esempio: si tratta di un header grafico con image replacement e fast CSS rollover. Per prima cosa vediamo il markup:
<div id=”header”>
<h1>
<a href=”#”><span></span>CSS Rollover</a>
</h1>
</div>
Si tratta di un titolo h1
che contiene un link, il cui testo è preceduto da uno span
vuoto.
Il motivo di questo elemento aggiuntivo, che non influenza in alcun modo il contenuto della pagina, è perché
useremo la Cover-up span.
Ma prima di addentrarci nel CSS, ecco l’unica immagine che compone l’esempio:
Per quanto riguarda il CSS, si tratta in sostanza di nascondere visivamente il testo, rimpiazzarlo con la grafica e intervenire con il background-position nella fase :hover del link. Ecco il CSS per intero:
div#header{position: relative;height: 120px;background: #282828}
div#header h1{font-size: 10px;margin: 0}
div#header h1 a{position: absolute;top: 30px;left: 15px;
width: 450px;height: 60px;color: #666}
div#header h1 a span{position: absolute;width: 100%;height: 100%;
cursor: pointer;background: url(header.png) no-repeat}
div#header h1 a:hover span{background-position: 0 -60px}
Il nostro header viene posizionato relativamente così da consentire il posizionamento assoluto
al suo interno, mentre per il titolo imposteremo un font-size piccolo oltre che annullare i margini.
Il link verrà quindi posizionato assolutamente di grandezza pari al logo. Lo span infine
verrà posizionato assolutamente all’interno del link, con le sue stesse
dimensioni così da coprirlo per intero: verrà attribuita infatti l’immagine di sfondo, la cui
background-position
sarà modificata per lo stato :hover del link.
Ovviamente fast CSS rollover e Image Replacement possono essere applicati su link multipli e menu: un esempio notevole in questo senso è il sito della Apple, che implementa un menu totalmente grafico a quattro stati con una sola immagine.
In sostanza si tratta di dichiarare un’unica immagine di sfondo per tutti i link, per poi specificare per ciascuno di esso le coordinate background-position per i vari stati. La tecnica è stata introdotta diverse volte qui su HTML.it e mi limito a presentare alcuni approfondimenti:
L’ultimo articolo presenta inoltre un’interessante sperimentazione per ottenere transizioni con opacità variabile grazie a JQuery.
Abbiamo visto in questo articolo gli esempi più rappresentativi di rollover grafico con i CSS: (header, bottoni e navigazione) ripercorrendo brevemente le varie strategie implementative. Gli esempi qui visti hanno una buona compatibilità: sono stati infatti testati su IE dalla versione 6 alla 8, oltre che su Opera, Firefox, Safari e Chrome. Codice, immagini ed esempi sono disponibili per il download. Alla prossima.
Se vuoi aggiornamenti su I fondamenti del rollover grafico: immagini, sprite e text-replacement 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.
Pinnacle Videospin è un software gratuito per il montaggio di video e la creazioni di filmati. Il software permette di […]
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.
Vediamo come prendere possesso di un sistema Windows 7 con BackTrack
Panoramica introduttiva dedicata ad uno dei più completi framework Javascript dell’ultima generazione
Cosa fare quando ci si trova infettati da un virus? Alcuni consigli per liberarsi in modo sicuro dai peggiori nemici del nostro computer: dalle scnasioni online agli antivirus gratuiti
3D Studio Max è una soluzione avanzata per la grafica vettoriale tridimensionale e l’animazione. Dall’interfaccia alla creazione e modellazione di oggetti tridimensionali: una guida passo per passo all’uso del potente programma di Autodesk. Disponibili due esercitazioni pratiche passo passo e ricche di esempi per la modellazione di una poltrona e di una lampada da tavolo.