In questo articolo vedremo alcune soluzioni per emulare attraverso il
background i bordi tratteggiati. Se vi state chiedendo quale può essere
l'utilità, ci sono alcuni punti da tener presente:
- I bordi con i CSS contribuiscono ad incrementare le dimensioni di
elementi con larghezza impostata con i CSS - Internet Explorer ha dei problemi di resa con i bordi di tipo
dotteddashed - I bordi con i CSS vengono stampati di default dai browser, le immagini di sfondo no
- Usare la grafica ci può dare maggiore flessibilità ed espressione creativa
Ovviamente i bordi con tratteggio non sono una soluzione comune, nè indispensabile,
ma in alcuni casi possiamo pensare di emularli e/o addirittura migliorarli attraverso
gli sfondi. Vediamo come.
Tratteggio su un lato con il background
Il primo esempio rappresenta un semplice layout a due colonne, in cui la sidebar
è separata visivamente grazie ad un tratteggio come immagine di sfondo. La costruzione
del layout esula dagli scopi dell'articolo: basti sapere che si sono usati i float
opposti di cui abbiamo parlato nell'articolo Float: teoria e pratica.
Vediamo invece la regola CSS essenziale:
div#navigation{
float:right;
width:250px !important;
width /**/:270px;
padding-left: 20px;
background: url(dot.gif) repeat-y top left
}
Per quanto riguarda la larghezza e il padding sinistro del div id="navigation",
è importante evidenziare che per evitare di incorrere a problemi di box model di IE5 e IE5.5
ho dovuto ricorrere a una variante del box model hack di cui ho parlato in Box model e workaround
sul blog. Infine, l'immagine di sfondo, una piccola gif di 6x2 pixel, viene ripetuta
verticalmente sul lato sinsistro.
False colonne con tratteggio
Se volessimo separare totalmente le due colonne, rispetto al primo esempio,
le cose sarebbero ancora più semplici. Vediamo quindi il secondo esempio. Anche qui si tratta
di ripetere verticalmente un'immagine di sfondo che contenga il tratteggio: in questo caso
è una piccola png non trasparente di 6x1 pixel. La differenza è che però l'immagine viene
ripetuta sul container. Ecco la regola con la dichiarazione chiave:
div#container{background:url(dot2.png) repeat-y 520px 0}
Avremo così le due colonne che sono separate visivamente, indipendentemente da
quale delle due sia la più lunga, grazie ad un tratteggio che si estende tra l'header
e il footer. A questo proposito, l'unico accorgimento aggiuntivo è che sia l'header
sia il footer devono avere un colore o un'immagine di sfondo assegnata, così da
coprire il bordo tratteggiato.
Il CSS per il layout utilizzato è molto simile all'esempio precedente:
l'unica differenza sostanziale è che non c'è stata la necessità del box model hack,
dato che per la sidebar non è più necessario attribuire padding e sfondo: quest'ultimo
infatti viene ripetuto sul container.
Da notare che l'esempio, al contrario degli altri due dell'articolo,
non costituisce una sostituzione dei bordi tramite CSS: un effetto simile a quello appena visto è infatti
ottenibile solo attraverso l'uso degli sfondi.
Tratteggio sui quattro lati
Nei primi due esempi abbiamo visto come sia possibile separare visivamente due
elementi grazie ad un tratteggio. Nel terzo esempio abbiamo
un elemento con larghezza variabile e altezza scalabile con un bordo tratteggiato grazie al background.
Ad una prima idea di sviluppo, si potrebbe pensare che sono necessari quattro elementi
che facciano da "agganci grafici" nel markup (uno per attribuire come sfondo ciascun lato del tratteggio)
insieme a due immagini (orizzontale e verticale) ma le cose si possono semplificare se
pensiamo le cose in maniera un po' differente.
Ecco quindi l'unica immagine che è stata usata nell'esempio:
si tratta di una gif trasparente larga 1000 pixel e alta 600, che potrà essere usata
per avere un bordo tratteggiato attorno ad elementi al massimo di 1000x600 px.
Con questa piccola limitazione, siamo in grado di realizzare l'esempio con appena due
agganci grafici nell'HTML: uno per i lati superiore e sinistro, l'altro per i lati inferiore e destro.
Ecco il codice HTML dell'esempio:
<div class="highlight">
<div class="hl-inner">
Qui il contenuto
</div>
</div>
Possiamo quindi procedere con il CSS, vedendo le due regole per intero:
div.highlight{
width:40%;
background: #F6FBEA url(dottedbig.gif) no-repeat top left;
}
div.hl-inner{
background: url(dottedbig.gif) no-repeat bottom right;
padding: 10px;
}
Due parole sull'implementazione dell'esempio: come abbiamo detto,
dell'immagine in realtà verranno usati la porzione in alto a sinistra e quella in basso a destra,
così da dare un'effetto di continuità.
Il div esterno usa infatti il background sulle coordinate top e left,
mentre quello interno usa le cordinate bottom e right. Da notare che
il div esterno stabilisce le dimensioni, mentre quello interno il padding: in questo modo
non c'è tra l'altro rischio di incorrere in problemi di box model con IE5 e IE 5.5,
e avremo una resa consistente anche su questi due browser senza la necessità di hack o workaround.
Conclusioni e download
Abbiamo visto tre semplici esempi per ottenere bordi tratteggiati grazie al background.
Si tratta di avere solo un po' di pazienza e fantasia e un programma di grafica per ottenere
una buona resa consistente e cross-browser grazie agli sfondi. La compatibilità degli esempi è
buona: sono stati testati con successo su Internet Explorer dalla versione 5 alla 7 e le
ultime versioni di Opera, Firefox e Safari. Codice e immagini sono disponibili
per il download. Alla prossima.
