Tra le tendenze di design in voga negli ultimi mesi, ne è emersa una abbastanza inconsueta: quella di creare dei bordi colorati (meglio se in colore non troppo acceso rispetto allo sfondo) intorno alla pagina, come una sorta di cornice.
Il sito che ha fatto scuola in proposito è stato Hicksdesign, che ha utilizzato questo stile nel suo recente restyling e che viene infatti citato in quasi tutti i tutorial relativi a questa tecnica.

A prima vista potrebbe sembrare di facile realizzazione: la prima idea che viene in mente è quella di assegnare all’elemento body la proprietà “border”.
All’atto pratico questa soluzione si rivela inefficiente perchè, in siti con un lungo scroll verticale il bordo inferiore non viene visualizzato lungo la parte bassa dello schermo del browser, ma alla fine della pagina. Nel blog di Hicksdesign invece la cornice rimane fissa nonostante si tratti di un blog, quindi di un sito ad evidente impostazione verticale.

Vediamo quindi come implementare questa tecnica in maniera corretta.

Per prima cosa bisogna creare quattro distinti DIV, uno per ogni lato della cornice:

<div id=”left”></div>
<div id=”right”></div>
<div id=”top”></div>
<div id=”bottom”></div>

Andiamo quindi a vedere la codifica CSS necessaria per regolare il posizionamento dei quattro elementi:

#top, #bottom, #left, #right {
background: #a5ebff;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 15px;
}
#left { left: 0; }
#right { right: 0; }

#top, #bottom {
left: 0; right: 0;
height: 15px;
}
#top { top: 0; }
#bottom { bottom: 0; }

A questo punto dovremmo ottenere un risultato simile a questo esempio.

Problemi con Internet Explorer 6
Immancabile precisazione: la tecnica in questione non funziona con IE6.
Dovremo quindi creare un CSS apposito per IE6, per disattivare la visualizzazione dei bordi:

#top, #bottom, #left, #right { display: none; }

e richiamarlo servendoci dei commenti condizionali

<!–[if lte IE6]>
<link href=”/ie6.css” type=”text/css” rel=”stylesheet” media=”screen” />
<![endif] –>



Altri articoli che potrebbero interessarti