L’articolo (in lingua inglese) proviene da 456 Berea Street ed è stato tradotto e riprodotto per gentile concessione dell’autore.
Questa è una spiegazione di come ho adattato la tecnica Sliding Doors di Doug Bowman al lavoro di recente riprogettazione con le linguette invertite per netrelations.se (il mio collega Tobias Nilsson ha fatto il design). Invertendo i tab intendo dire che sono allineati al fondo, e come aumenta la dimensione del testo aumentano quelle del tab dal basso verso l’alto anziche viceversa come è nella tecnica originale Sliding Doors.
I tab risultando invertiti, il lato inferiore e la sfumatura dell’immagine di testa mi hanno impedito di utilizzare la tecnica originale senza modificarla.
Poichè i tab sono invertiti, con i loro margini inferiori sempre visibili, l’immagine di sfondo utilizzata per creare i tab deve essere posizionata sul fondo con gli elementi <li> e <a>. Questo rende impossibile (almeno io penso che non ci sia modo per farlo, e se tu ci riesci fammelo sapere) mettere le differenti caratteristiche dei tab (normale, hover, corrente) nella stessa immagine per creare una singola immagine rollover, eccetto per la parte di ogni tab che ha una determinata larghezza, in questo caso la parte sinistra. Se la largheza o l’altezza di un tab fosse conosciuta sarebbe possibile utilizzare singole immagini rollover piene, ma in questo caso, entrambe dipenderanno dalla dimensione del font e dalla quantità d testo in ogni tab.
La parte sinistra di ogni tab ha una determinata larghezza, così tutte le immagini utilizzate possono essere fuse in un’unica immagine. Ho messo l’effetto hover anche nella parte destra dell’immagine, che verrà precaricata per ridurre il numero di volte in cui deve essere scaricata dal server.
I tab hanno un differente aspetto grafico per la pagina corrente. Come per lo stato normale del tab, non sono riuscito a trovare un modo di combinare la parte destra dell’immagine con altre di altre immagini.
L’immagine finale utilizzata è l’immagine di testa, che, per rendere le cose ancora più complicate, porterà un effetto di ombreggiatura sui margini superiori dei tab non attivi. Questo viene attuato per un numero totale di quattro immagini utilizzate per creare il tab (e l’immagine di testa):
Un paio di piccoli ritocchi alla tecnica Sliding Doors sono necessari per farla funzionare con questo design. Prima di tutto, c’è un bordo di 1px tra i tab. Finchè ogni tab ha un bordo sia destro che sinistro, tutti gli elementi <li> eccetto il primo sono dotati un margine sinistro di -1px, per coprire il bordo destro del tab precedente.
Poi c’è l’ombreggiatura data dalla immagine di testa. Per mettere i tab, che presentano anch’essi la loro ombreggiatura, di fronte all’immagine di testa, div#nav è dotato di un margine superiore di -19px, che equivale alla distanza del margine inferiore dell’immagine di testa dall’inizio dell’ombreggiatura. Il margine negativo tirerà il tab in posizione. E nel caso in cui tu ti stia domandando perchè non utilizzo l’immagine di testa come il background per div#nav, è a causa di un problema con Safari che ripete verticalmente l’immagine di background con un equivalente negativo verticale, anche quando no-repeat è specificato.
Per cambiare lo stato dei tab, l’immagine di background della parte sinistra (che è richiamata dall’elemento <li>) è spostato orizzontalmente, e l’immagine di background della parte destra (che è richiamata dall’elemento <a>) è sostituita con l’effetto hover o quello corrente.
Su netrelations.se, l’elemento <body> di ogni pagina ha un id che specifica quale tab deve essere il corrente. Nel file CSS la sequenza delle regole è creata per ogni singolo tab. Per mostrare come appare il tab corrente ho specificato id=”services” per l’elemento <body> di questa pagina.
Noterai che non c’è l’effetto hover sotto Internet Explorer, a causa della sua incapacità di interpretare la pseudo-classe :hover su ogni cosa eccetto i link. In questo caso ho deciso di tenere il codice più pulito possibile invece di inserire un markup ulteriore per far si che funzioni anche sotto IE.
Inoltre per evitare il noioso intoppo che spesso si verifica su IE/Win allorche il mouse passa sul link che presenta un immagine di background e IE/Cache è disattivata io ho impegato l’espediente spiegato da Dean Edwards nel suo articolo Caching IE.
Alla fine il risultato per me è abbastanza buono. Certo non è perfetto. Allargando il testo farai apparire i tab meno piacevoli, specialmente per il tab corrente, ma in fin dei conti non sarà un completo disastro.
