Per
ottenere un design ad alto impatto grafico si è soliti ricorrere ad un
massiccio uso della proprietà background dei fogli di stile.
In particolare, un metodo molto di moda è quello di applicare un
grande sfondo grafico al body del documento in modo tale che risulti
un'estensione del layout propriamente costruito secondo i classici
canoni di sviluppo (codice HTML e CSS). Evangelista storico di questa
tecnica è stato, e tuttora è, Nick La -- autore di nDesign Studio e Web
Designer Wall. Come al solito, uno screenshot vale più di mille parole:
Vediamo come è possibile ottenere tale risultato.
Il layout, requisiti e sviluppo
Prima fase del progetto è lo sviluppo del layout. Visto che lo scopo
sarà quello di integrare visivamente uno sfondo grafico con la
struttura, quest'ultima dovrà sottostare ad un indispensabile
requisito: dovendo "unirsi" ad un'immagine, dovrà essere
obbligatoriamente di dimensione fissa. Di conseguenza tutti i
posizionamenti (posizione rispetto al viewport, posizione di elementi
interni come box e barre laterali etc...) dovranno essere calcolati in
pixel (px).
Durante la progettazione di un layout si è soliti predisporre
un elemento, in genere chiamato wrapper, che funga da contenitore per
tutti gli altri elementi: anche se è una tecnica largamente diffusa, è
possibile che in alcune situazioni essa non debba essere
necessariamente utilizzata. Nel nostro caso però, la presenza di un
wrapper semplificherà enormemente il lavoro di dimensionamento e
posizionamento e quindi il suo utilizzo è obbligatorio.
<div id="wrapper">
<div id="header">...</div>
<div id="main">...</div>
<div id="footer">...</div>
</div>
Impostiamo la dimensione del layout con un po' di CSS:
#wrapper { background: #fff; width: 750px; margin: 200px auto 0 auto; }
Come abbiamo detto la larghezza deve essere fissa (può essere quello
che volete, io ho scelto 750px). Con la proprietà margin abbiamo
posizionato il layout centralmente e abbiamo lasciato 200px di spazio
in alto (per dare visibilità all'artwork di sfondo).
Visto che ci siamo scegliamo anche un colore di sfondo:
body { background: #8dd145; }
Per quanto riguarda #header, #main e #footer le loro caratteristiche
sono ininfluenti: nella pagina di esempio ho scelto una classica
struttura "a blog" (corpo più una barra laterale), ma ovviamente siete
liberi di scegliere qualsiasi composizione.
Ecco l'esempio funzionante.
Lo sfondo grafico: requisiti
Lo sfondo grafico è una grande immagine che andrà applicata al
body del documento attarverso la proprietà background e anche
esso dovrà sottostare ad alcuni requisiti:
- Per prima cosa la sua dimensione dovrà
essere maggiore della dimensione del wrapper. - Inoltre, agli estremi dovrà uniformarsi al resto della
pagina. Ovvero è importanto che l'artwork non venga troncato nettamente
ai limiti dell'immagine, ma vada a sfumare sul colore di sfondo della
pagina. (vedi figura 3):
Il secondo requisito si rende necessario per supportare i visitatori con risoluzioni dello schermo molto elevate.
Lo sfondo grafico: realizzazione
Armiamoci di un qualsiasi programma di grafica raster (Photoshop,
Paint Shop Pro, Gimp...) e creiamo una nuova immagine di dimensione
950x500 pixel Dopodiché riempiamo con il colore di sfondo che abbiamo
precedentemente impostato per il body.
Disegnamo un rettangolo al centro dell'immagine di larghezza 750px e
lasciamo 200px di distanza dal bordo superiore (vedi figura 4). Questo
rettangolo, che riempiamo di bianco, rappresenta il nostro wrapper e ci
servirò da guida per costruire il layout (vedi figura 5).
È importante che sia perfettamente centrato, altrimenti quando
andremo a mettere lo sfondo nella pagina potrebbe risultare sfalsato
rispetto al resto del documento. Per esserne sicuri lo proviamo subito:
body { background: #8dd145 url(sfondo.png) top center no-repeat; }
Per la creazione dell'artwork non ci sono altre regole da seguire,
se non quella di rimanere il più possibile fuori dalla sagoma del
wrapper (lavorare sullo spazio "verde"), specialmente ai lati.
Ecco come si presenta il nostro esempio sviluppato:
Come si può notare, l'artwork utilizzato va a sovrapporsi alla
sagoma del wrapper, e quindi quando viene applicato al body del
documento il layout propriamente costruito risulterà sovrapposto.
Per risolvere basta aumentare il margine superiore nella regola
#wrapper:
#wrapper { background: #fff; width: 750px; margin: 330px auto 0 auto; }
Ecco il layout corretto:
Conclusioni, approfondimenti e ottimizzazione
La costruzione del layout portata avanti in questo articolo è solo
un esempio delle mille possibili realizzazioni. L'obiettivo di questa
tecnica è quello di realizzare layout molto complessi superando i
limiti imposti dai CSS attraverso la grafica. Ricordate sempre che la
vostra realizzazione risulterà funzionante soltanto quando non si
noterà il punto di unione tra la struttura realizzata con fogli
di stile e lo sfondo grafico.
Lo scopo di questo articolo era quello di dare una visione d'insieme
delle varie fasi di realizzazione, e quindi l'artwork portato come
esempio è stato scarsamente ottimizzato (e si vede).
In realtà i layout realizzati attraverso gli sfondi grafici
sono molto pesanti: è quindi obbligatorio tenere sotto controllo
l'ottimizzazione dello sfondo sia durante la sua realizzazione
(attraverso gli strumenti inclusi in qualsiasi programma di grafica
raster) sia durante la sua implementazione, ricorrendo magari a
tecniche efficaci come quella degli sprite.
Se siete in cerca di approfondimenti, il miglior modo di imparare ad
affinare la tecnica rimane quello di osservare il lavoro altrui: se vi
imbattete in un sito come Web Designer Wall, non c'è niente di meglio
che osservarne il codice e guardare come è stato realizzato l'artwork.
Tutto il materiale proposto è disponibile per il download.
