Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Sliding Doors of CSS

Sliding Doors of CSS

di Douglas Bowman, traduzione di Gdesign e Chenoa, 30 Gennaio 2004

Versione Stampabile

L'articolo (in lingua inglese) proviene da A List Apart ed è stato tradotto e riprodotto per gentile concessione dell'autore.
Dato che "Sliding Doors" è il nome scelto dall'autore per definire la tecnica illustrata nell'articolo abbiamo preferito lasciare il titolo in lingua originale.


Uno dei vantaggi poco discussi dei CSS è la capacità di disporre le immagini di sfondo, permettendo loro di scivolare l'una sull'altra per creare determinati effetti. Allo stato attuale i CSS2 richiedono un elemento HTML per ogni immagine di sfondo. In molti casi, il tipico markup per i componenti di interfaccia più comuni fornisce già molti elementi per il nostro uso.

Uno di questi casi è la navigazione tab (intendiamo un menu costituito da "linguette" che d'ora in poi chiameremo semplicemente tab menu o tab per riferirci alle "linguette" che costituiscono il menu). È ora di prendere il controllo sui tab menu che stanno crescendo in popolarità come principali mezzi di navigazione di un sito web. Adesso che i CSS sono ampiamente supportati, possiamo soffermarci sulla qualità e sull'aspetto dei tab menu sui nostri siti. Molto probabilmente siete consapevoli che i CSS possono essere utilizzati per sistemare un semplice elenco non ordinato. Forse avete anche visto elenchi disegnati come tab menu simili a questo:

Esempio di tab menu con colori piatti e angoli quadrati.

È possibile prendere lo stesso esatto markup del tab menu di sopra e trasformarlo in qualcosa simile a questo?

Tab menu con angoli arrotondati e con ombreggiature 3D.

Applicando un semplice stile è possibile.

Dov'è l'innovazione?

Ho notato che molti tab menu creati con i CSS hanno le stesse caratteristiche generali: rettangoli di colore, forse un contorno, un bordo che scompare per il tab corrente (si intende la voce attiva del tab menu), un colore che cambia durante l’attivazione. Questo è tutto quello che i CSS possono offrirci? Un gruppo di caselle e colori piatti?

Prima dell'uso più esteso dei CSS, abbiamo iniziato a vedere molte innovazioni nel progetto della navigazione. Forme creative, un miscuglio di colori e l'imitazione delle interfacce dal mondo reale. Ma spesso questi progetti si basavano molto su una complessa costruzione di immagini inserite insieme al testo, o erano coperti da una moltitudine di tabelle annidate. Modificare un testo o cambiare l'ordine dei tab implicava un procedimento scomodo. Era impossibile ridimensionare il testo, e ciò causava importanti problemi con il layout della pagina.

La navigazione fatta da semplice testo è molto più facile da mantenere e si carica più velocemente rispetto alla navigazione basata sul testo come immagine (testo grafico). Inoltre, anche se possiamo attribuire alt ad ogni immagine, il semplice testo è ancor più accessibile poiché può essere ridimensionato dagli utenti con problemi di vista. Non è meraviglioso che la navigazione basata sul semplice testo, creata con i CSS, stia facendo un salto indietro nel web design? Ma la maggior parte dei tab menu creati finora con i CSS sono un passo indietro rispetto a quelli che eravamo abituati a fare - certamente nulla da essere incluso in un portfolio di progetti web. Una nuovissima tecnologia adottata (come i CSS) dovrebbe permetterci di creare qualcosa di meglio, senza perdere la qualità del design che si otteneva con le tabelle annidate e con i tab menu tutti basati sulle immagini.

La tecnica Sliding Doors

Progettati bene, i componenti flessibili dell’interfaccia, che si espandono e contraggono con la dimensione del testo, possono essere creati utilizzando due immagini di sfondo separate. Una per la sinistra ed una per la destra. Pensate a queste due immagini come porte scorrevoli (Sliding Doors) che completano un'unica via d’accesso (doorway). Le porte scivolano insieme e si sovrappongono maggiormente per riempire uno spazio più stretto, oppure scivolano separatamente sovrapponendosi di meno per riempire uno spazio più largo, come mostra lo schema sotto:

Schema delle porte scorrevoli.

Con questo modello, un'immagine copre una porzione dell’altra. Supponendo di avere qualcosa di unico all'esterno di ogni immagine, come l'angolo arrotondato di un tab, non vogliamo che l'immagine davanti venga completamente oscurata dall'immagine dietro. Per evitare che questo accada, creiamo l'immagine davanti (lato sinistro in questo esempio) più stretta possibile. Ma la manteniamo larga quanto basta per rivelare l'unicità del lato. Se gli angoli esterni fossero arrotondati, dovremmo creare l'immagine davanti larga soltanto quanto la porzione curva dell'immagine:

Schema tab con gli angoli superirori arrotondati.

Se l'oggetto diventa più ampio della larghezza mostrata sopra, a causa dei cambiamenti di dimensione del testo o dei differenti tipi di testo, le immagini saranno trascinate separatamente, creando un brutto distacco. Dobbiamo fare una scelta arbitraria sulla quantità di espansione da accogliere. Quanto grande pensiamo possa diventare l’oggetto con il ridimensionamento del testo nel browser? Realisticamente, dovremmo tenere conto della possibilità che il nostro testo aumenti almeno del 300%. Abbiamo quindi bisogno di allargare le nostre immagini di sfondo per compensare questo aumento. Per questi esempi realizzeremo l'immagine dietro (lato destro) 400x150 pixel, e l'immagine davanti 9x150 pixel.

Tenete a mente che le immagini di sfondo mostrano la "via d'accesso" (doorway) utilizzabile dall'elemento ai cui sono applicati (superficie dell'area + padding). Le due immagini sono ancorate agli angoli esterni dei loro rispettivi elementi. Le porzioni visibili di queste immagini di sfondo vanno bene insieme nella doorway in modo da creare una forma simile ad un tab:

Lo schema mostra entrambe le immagini con un altezza maggiore dal basso. Anche l'immagine destra ha una larghezza maggiore da sinistra.

Se il tab viene forzato ad una dimensione più grande, le immagini scivolano separatamente, riempiendo una doorway più larga e mostrando di più ogni immagine:

Lo schema mostra cosa succede al tab quando viene forzato ad una dimensione pił grande.

Per questo esempio, ho usato Photoshop per creare le due semplici immagini del tab, smussate e leggermente tridimensionali, mostrate all'inizio di questo articolo. Per uno dei tab, il riempimento è chiaro ed il bordo scuro – la versione più chiara sarà usata per rappresentare il tab nello stato corrente o attivo. Data la tecnica di questo modello per le immagini tab di destra e sinistra, dovremmo espandere l'area di copertura dell'immagine del tab, e dividerla in due porzioni.

Immagini lato destro e lato sinistro.

La stessa cosa vale per l'immagine più chiara del tab (quella che rappresente lo stato attivo). Una volta che abbiamo creato tutte e quattro le immagini (1, 2, 3, 4), possiamo passare al markup e al CSS per il nostro tab menu.

Creazione del Tab

Osservando la creazione di elenchi orizzontali con i CSS, noterete almeno due metodi per raggruppare un gruppo di elementi in una riga. Ognuno ha i suoi propri vantaggi e difetti. Entrambi richiedono dei rapporti piuttosto frustranti con i CSS che diventano a volte confusionari. Uno usa il box inline, l'altro usa il float.

Il Primo Metodo - forse il più comune - consiste nel modificare la proprietà display di ciascuno elemento dell'elenco in "inline". Il metodo inline è piacevole per la sua semplicità. Comunque, il metodo inline causa ai browser alcuni problemi d'esecuzione per la tecnica Sliding Doors che stiamo discutendo. Il Secondo Metodo, che è quello su cui ci concentreremo, utilizza i float per sistemare ogni elemento dell'elenco in una riga orizzontale. I float possono essere ugualmente frustranti. Il loro comportamento apparentemente incoerente altera tutta la logica naturale. Tuttavia una comprensione di base su come trattare gli elementi floated multipli, e quindi i mezzi per rendere affidabile il "break out" dei float (o ciò che li contiene), può farci ottenere dei prodigi.

Andiamo a nidificare i diversi elementi floated dentro ad un altro che contiene un elemento floated. Facciamo in modo che il float (genitore) esterno sia completamente coperto dai float interni. In questo modo saremo in grado di aggiungere un colore e/o un'immagine di sfondo dietro i nostri tab. È importante ricordare che l'elemento successivo, seguendo i nostri tab, ha bisogno di reimpostare la sua posizione utilizzando nei CSS la proprietà clear. Questo impedisce ai tab floated di influire sulla posizione degli altri elementi della pagina.

Iniziamo con il seguente markup:

<div id="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

In realtà, il div #header potrebbe anche contenere un logo o un box per la ricerca. Nel nostro esempio, abbiamo accorciato il valore di href in ogni ancora. Ovviamente, voi assegnerete ad href il valore che vi interessa.

Iniziamo ad definire lo stile del nostro elenco assegnando la proprietà float al contenitore #header. Ciò aiuta e garantisce a #header di "contenere" le voci dell'elenco che all'interno saranno anche floated. Dato che si tratta di un elemento floated, dobbiamo anche fissare una larghezza (width) pari al 100%. Per garantire a #header di allungarsi per riempire l'intera area dietro i tab, aggiungiamo temporaneamente un sfondo di colore giallo. Abbiamo anche definito alcune proprietà di default per il testo con lo scopo di assicurarci che ogni cosa all'interno sarà uguale:

#header {
    float:left;
    width:100%;
    background:yellow;
    font-size:93%;
    line-height:normal;
    }

Per il momento, impostiamo per l'elenco non ordinato (ul) i valori di margin/padding di default e per le voci dell'elenco (li) impostiamo questi valori a "0"; rimuoviamo anche il punto elenco. Ad ogni voce dell'elenco impostiamo a sinistra il valore di float:

#header ul {
    margin:0;
    padding:0;
    list-style:none;
    }
#header li {
    float:left;
    margin:0;
    padding:0;
    }

Impostiamo le ancore come elementi "block-level", in modo che possiamo controllare tutti gli aspetti senza preoccuparci per il box inline.

#header a {
    display:block;
    }

In seguito, aggiungiamo alle voce dell'elenco l'immagine di sfondo del lato desto (cambiamenti/aggiunte sono in grassetto):

#header li {
    float:left;
    background:url("norm_right.gif")
      no-repeat right top;
    margin:0;
    padding:0;
    }

Prima di aggiungere l'immagine del lato sinistro fermiamoci in modo da poter vedere cosa abbiamo finora: Esempio 1. (Nel file di esempio, ignorate la regola che ho applicato al body. Sono soltanto valori di base per margin, padding, colori e testo.)

- - -

Adesso possiamo piazzare l'immagine del lato sinistro davanti a quella di destra applicandola all'ancora (il nostro elemento interno). Allo stesso tempo aggiungiamo il padding, allargando il tab e spingendo il testo lontano dai bordi del tab:

#header a {
    display:block;
    background:url("norm_left.gif")
      no-repeat left top;
    padding:5px 15px;
    }

Così otteniamo l'Esempio 2. Notiamo come i nostri tab hanno iniziato a prendere forma. A questo punto, un avviso agli utenti confusi di IE5/Mac, che stanno chiedendosi:"Cosa stiamo seguendo qui? I tab sono ammucchiati verticalmente e si allungano attraverso tutto lo schermo". Non preoccupatevi, arriveremo presto a voi. Per ora, fate del vostro meglio per seguirci, o se potete, cambiate temporaneamente browser e state sicuri che ripareremo presto i problemi di IE5/Mac.

- - -

Adesso che abbiamo posizionato le immagini di sfondo per i tab normali (non attivi), abbiamo bisogno di cambiare le immagini usate per il tab corrente (attivo). Lo facciamo puntando la voce dell'elenco che contiene id="current" e l'ancora dentro. Siccome non abbiamo bisogno di modificare nessun altro aspetto dello sfondo, oltre che l’immagine, usiamo la proprietà background-image:

#header #current {
    background-image:url("norm_right_on.gif");
    }
  #header #current a {
    background-image:url("norm_left_on.gif");
    }

Abbiamo bisogno di qualche tipo di bordo lungo la parte bassa dei nostri tab. Ma applicare la proprietà border al contenitore (genitore) #header significa avere un bordo inferiore anche sul tab corrente. Invece, creiamo una nuova immagine con il bordo che vogliamo incluso nella parte bassa dell'immagine. Già che ci siamo aggiungiamo una sottile sfumatura come quella che vediamo qui:

Immagine di sfondo

Applichiamo questa immagine allo sfondo del nostro contenitore #header (al posto del colore giallo che avevamo applicato), spingiamo l'immagine di sfondo verso il basso dell'elemento ed usiamo un colore di sfondo corrispondente alla parte superiore di questa nuova immagine. Allo stesso tempo, togliamo il padding dall'elemento body aggiunto in origine, e applichiamo un padding di 10 pixel in alto, a sinistra e a destra per ul:

#header {
    float:left;
    width:100%;
    background:#DAE0D2 url("bg.gif")
      repeat-x bottom;
    font-size:93%;
    line-height:normal;
    }
#header ul {
    margin:0;
    padding:10px 10px 0;
    list-style:none;
    }

Per completare l'effetto tab abbiamo bisogno di rifilare il tab corrente (attivo) attraverso il bordo, come accennato sopra. È probabile pensare che applicheremo i bordi inferiori ai nostri tab unendo il colore del bordo nell'immagine di sfondo che abbiamo aggiunto in #header e poi cambiando in bianco il colore del bordo per il tab corrente. In questo modo si darebbe luogo ad un piccolo "gradino" visibile ad occhi attenti ai pixel. Invece, se modifichiamo il padding delle ancore, possiamo creare angoli perfettamente quadrati dentro il tab corrente, come nell’ingrandimento in basso:

Ingradimento delle due versioni del tab. Il primo mostra il piccolo gradino di 1 pixel, mentre il secondo mostra un perfetto angolo a 90 gradi.

Otteniamo questo risultato diminuendo il padding inferiore dell'ancora normale (non attiva) di 1 pixel (5px – 1px = 4px) ed aggiungendo questo pixel dietro l'ancora corrente (attiva):

#header a {
    display:block;
    background:url("norm_left.gif")
      no-repeat left top;
    padding:5px 15px 4px;
    }
#header #current a {
    background-image:url("norm_left_on.gif");
    padding-bottom:5px;
    }

La modifica permette che il bordo inferiore sia visibile attraverso il tab normale, ma si nasconda per il tab corrente. Questo ci porta all' Esempio 3.

Ritocchi Finali

Osservando attentamente l'esempio precedente avrete potuto notare del bianco negli angoli superiori dei tab. Questi angoli opachi evitano all'immagine posteriore di mostrarsi attraverso l'angolo sinistro dell'immagine di fronte. In teoria potremmo tentare di rendere uguali gli angoli delle immagini del tab con una porzione dello sfondo dietro ad essi. Ma i nostri tab si possono sviluppare in altezza, spingendo lo sfondo dietro ad essi e riducendo il cambiamento del colore dello sfondo che abbiamo tentato di rendere uguale. Invece, modifichiamo le immagini, facendo trasparenti gli angoli dei nostri tab. Se le curve sono anti-aliased, rendiamo opachi i bordi utilizzando un colore medio rispetto al colore dello sfondo dietro ad essi.

Ora che gli angoli sono trasparenti, si vede una porzione dell'immagine del lato destro attraverso l'angolo dell'immagine del lato sinistro. Per compensare questo, aggiungiamo un valore di padding sinistro alla voce dell'elenco pari alla larghezza dell'immagine del lato sinistro (9px). Dal momento che il padding è stato aggiunto alla voce dell'elenco, abbiamo bisogno di rimuovere la stesso valore di padding dall'ancora per centrare il testo (15px- 9px= 6px):

#header li {
    float:left;
    background:url("right.gif")
      no-repeat right top;
    margin:0;
    padding:0 0 0 9px;
    }
#header a {
    display:block;
    background:url("left.gif")
      no-repeat left top;
    padding:5px 15px 4px 6px;
    }

Tuttavia, non possiamo lasciarlo ad entrambi, perché adesso l'immagine del lato sinistro riceve una spinta di 9 pixel, il valore di padding che abbiamo appena aggiunto, per allontanarsi dal margine sinistro del tab. Adesso che i margini interni di sinistra e destra sono visibili, i "doorway" combaciano uno sopra l’altro e non abbiamo più bisogno di tenere a lungo l'immagine sinistra di fronte. In questo modo possiamo scambiare l'ordine delle due immagini di sfondo, applicandole agli elementi opposti. Abbiamo anche bisogno di scambiare le immagini utilizzate per il tab corrente:

#header li {
    float:left;
    background:url("left.gif")
      no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
    }
#header a, #header strong, #header span {
    display:block;
    background:url("right.gif")
      no-repeat right top;
    padding:5px 15px 4px 6px;
    }
#header #current {
    background-image:url("left_on.gif");
    }
#header #current a {
    background-image:url("right_on.gif");
    padding-bottom:5px;
    }

Fatto questo, arriviamo all'Esempio 4. Notate che i piccoli cambiamenti richiesti per fare gli angoli trasparenti creano un piccolo spazio inutilizzabile sul lato sinistro dove il tab non è cliccabile. Lo spazio inutilizzabile è all'esterno dell'area di testo, ma è leggermente visibile. Non è obbligatorio utilizzare delle immagini trasparenti per ciascun lato dei nostri tab. Se non vogliamo avere il piccolo spazio inutilizzabile, dobbiamo usare un colore uniforme dietro ai tab e poi utilizzare questo colore negli angoli delle nostre immagini del tab invece di crearli in maniera trasparente. Per ora, terremo i nuovi angoli trasparenti.

- - -

Per i restanti accorgimenti, facciamo dei cambiamenti tutti in una volta: in grassetto tutto il testo del tab, cambiamo il testo tab normale in un colore marrone, facciamo il testo del tab corrente di un colore grigio scuro, rimuoviamo la sottolineatura dai collegamenti ipertestuali, e cambiamo il colore del testo per lo stato hover dei collegamenti con lo stesso grigio scuro. Vediamo tutte le aggiunte e le modifiche finora fatte rappresentate nell'Esempio 5.

Un Hack per la Coerenza

Dopo l'Esempio 2, abbiamo accennato ad un problema con IE5/Mac dove ogni tab si allungava lungo l'intera larghezza del browser, costringendo ogni tab ad ammucchiarsi l'uno sopra l'altro. Non è proprio questo l'effetto che volevamo proporre.

In molti browser, un elemento float agirebbe come una specie di restringimento-confezione – si restringerebbe alla più piccola dimensione dei contenuti che contiene. Se l’elemento float contiene (o è) un immagine, il float si restringerà alla larghezza dell’immagine. Se contiene solo il testo, il float si restringerà alla larghezza della più lunga linea di testo non a capo.

Un problema si presenta in IE5/Mac quando un elemento block-level con larghezza automatica (auto-width) viene inserito in un elemento float. Gli altri browser restringono il float il più possibile, nonostante contenga il block-level. Ma IE5/Mac non restringe il float in questa circostanza. Anzi espande il float e l'elemento block-level a tutta la larghezza disponibile. Per superare questo problema, abbiamo bisogno di impostare il float anche all'ancora, ma soltanto in IE5/Mac e non in tutti gli altri browser. Allora useremo il Backslash Hack Commentato per nascondere una nuova regola a IE5/Mac che rimuove il float per tutti gli altri browser:

#header a {
    float:left;
    display:block;
    background:url("right.gif")
      no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#765;
    }
  /* Commented Backslash Hack
     hides rule from IE5-Mac \*/
  #header a {float:none;}
  /* End IE5-Mac hack */

I browser IE5/Mac ora dovrebbero mostrare i tab come inteso, secondo l'Esempio 6. Nulla dovrebbe cambiare per i browser non-IE5/Mac. Notiamo che IE5.0/Mac soffre di molti bug di rendering che sono stati risolti con l'upgrade alla versione IE5.1. Per questo motivo, la tecnica Sliding Doors soffre nella versione 5.0 al di là del punto che ho voluto sistemare. Dato che l'aggiornamento a IE5.1/Mac adesso è disponibile da un pò di tempo, la percentuale di Mac OS9 che ancora utilizzano IE5.0 dovrebbe essere molto bassa o addirittura nulla.

Varianti

Abbiamo appena illustrato la tecnica Sliding Doors per creare un tab menu con semplice testo, utilizzando una lista non ordinata di link mofidicata con qualche stile. Il tab menu si carica velocemente, è semplice da mantenere e il testo all'interno può essere ridimensionato senza rovinare il design. Abbiamo bisogno di dire come questa tecnica possa essere versatile per creare ogni tipo navigazione con un aspetto sofisticato?

L'uso di questa tecnica è limitata soltanto dalla nostra immaginazione. Il nostro esempio finale rappresenta solo una delle tante possibilità. Ma non dovremmo lasciare che un esempio ponga i confini alle nostre idee.

Per esempio, non è richiesto che i tab siano simmetrici. Ho creato velocemente la Versione 2 di questi tab, nei quali non c'è l’ombreggiatura 3D optando per dei colori uniformi, dei bordi angolari, ed un ampio e dettagliato angolo sul lato sinistro. Possiamo anche commutare l’ordine delle immagini sinistra/destra, a seconda del disegno, come mostra la Versione 2. Con un'accurata progettazione ed un'intelligente manipolazione dell'immagine, il fondo del bordo potrebbe essere abbandonato in favore di un insieme di immagini tab che con il background scorrono dietro a esse, come dimostrato nella mia Versione 3 con ispirazione decorativa. Se il vostro browser lo supporta, potete anche guardare questo file e vedere le tre differenti versioni alternando i fogli di stile.

Gli altri effetti che non trattiamo qui potrebbero essere aggiunti all'inizio di questa tecnica. In quest'esempio ho modificato il colore del testo per lo stato hover, ma potrebbero essere scambiate le intere immagini per creare degli interessanti effetti rollover. Dovunque due elementi HTML annidati esistano nel markup, i CSS possono essere usati per posizionare le immagini di sfondo per creare effetti che non abbiamo neanche iniziato ad immaginare. In quest’esempio, abbiamo creato una riga orizzontale di tab ma le Sliding Doors potrebbero anche essere usate in tante altre situazioni. Cosa potete fare con questa tecnica?

^Top

Dai un voto a questo articolo:   HITS: 167146 | VOTI: 245 | MEDIA VOTI: 9.2    

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 6