Incorniciare una pagina con i CSS
di: Gianluca Brindisi 25 Marzo 2008
L'idea di aggiungere una cornice ad una pagina web è venuta per prima a Jon Hicks e a Justin Kropp, che l'hanno utilizzata per il redesign dei rispettivi siti.
Figura 1 - Screenshot: il blog di John Hicks
Figura 2 - Screenshot: il blog di Justin Kropp
Il concetto è quello di creare un bordo intorno non tanto alla pagina in sé, ma al viewport del browser: in questo modo il risultato finale è quello di trasformare il browser stesso in una sorta di cornice. A causa delle scrollbar, però, non è possibile implementare questo effetto attarverso un semplice
body { border: 10px red; }
ma è necessario ricorrere a markup aggiuntivo, da posizionare in modalità
fissa (fixed).
Il markup
Visto che la cornice esiste su quattro lati, gli elementi di cui avremo bisgno saranno esattamente quattro div:
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
Questi quattro elementi verranno posizionati ognugno su un lato della pagina, dimensionati a dovere e riempiti con un colore di sfondo (tanto per partire con un esempio semplice).
Lo stile
Per prima cosa definiamo la posizione e il colore della cornice:
#top, #right, #bottom, #left {
background: #ff0000;
position: fixed;
}
Dopodiché sistemiamo ogni elemento su un lato:
#top { top: 0; left: 0; right: 0; }
#right { right: 0; top: 0; bottom: 0; }
#bottom { bottom: 0; left: 0; right: 0; }
#left { left: 0; top: 0; bottom: 0; }
Adesso impostiamo la dimensione, che sarà gestita con width per gli
elementi a sinistra e a destra, e con height per quelli in alto e in
basso:
#top, #bottom { height: 20px; }
#left, #right { width: 10px; }
Ultimi articoli CSS
Guide CSS
Guida CSS di baseI CSS servono per gestire tutto il layout di un sito Web. E'... |
Guida Layout dei siti con i CSSLa guida ai layout con i CSS è uno strumento ideale per chi intende... |
Guida Interfacce web con PhotoshopQuesta guida mostra con semplici esempi come lavorare ad un layout e... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base22 Febbraio 2010 a Milano |
|
|
Corso Accessibilità siti Web22 Marzo 2010 a Milano |
|
|
Corso Accessibilità siti Web01 Marzo 2010 a Roma |