Usare il background

In questo articolo vedremo alcuni possibili usi della proprietà background
dei fogli di stile per arricchire elementi e pagine HTML. Prima di cominciare,
alcune semplici considerazioni, visto che l'abuso e un modo inappropriato di usare
certi sfondi è stato e continua ad essere piuttosto diffuso:

• La presentazione di una pagina non dovrebbe mai interferire negativamente con i suoi contenuti, ma onorarli:
  non dovrebbe mai sacrificare principi quali leggibilità, usabilità, accessibilità e navigabilità.
• Salvo necessità particolari, elementi contenitori supplementari per puro scopo presentazionale andrebbero evitati.
  Il markup di una pagina dovrebbe mantenersi il più leggero e semantico possibile.
• Il peso della pagina, immagini incluse, andrà mantenuto il più basso possibile
  per favorire la velocità di caricamento. Ne abbiamo già parlato sull' introduzione
  ai Menu grafici con rollover e preload via CSS.

Dopo questa breve premessa, possiamo iniziare: per seguire questo articolo
vi sarà necessaria una conoscenza dei fogli di stile minima, meglio se accompagnata
da un programma di grafica a portata di mouse.

Background sul body

Direi che texture con nuvole, stelle, muri, marmo o quant'altro sono senz'altro
da evitare se volete dare un aspetto decoroso al vostro sito. In fatto
di sfondi, la tendenza attauale sembra essere quella di usare gradienti (ossia
sfumature) o al massimo dei semplici pattern (immagini ripetitive) abbastanza
leggeri. Vediamo alcuni esempi.

Gradiente orizzontale

Credo che molti di voi conoscano Alistapart.
Lo sfondo del body è una semplice immagine costituta da pochi pixels di larghezza,
e alta duecento. L'immagine è riempita con un gradiente, un tipo di riempimento
disponibile su tutti i programmi di grafica che consente una sfumatura tra due
o più colori. Ecco allora il nostro primo esempio
con un gradiente che va dal bordeaux al nero. L'immagine di sfondo è questa:

L' immagine viene ripetuta orizzontalmente sul body, a cui si assegna il colore di sfondo dell'ultima tonalità della
sfumatura. Vediamo la regola:

body{background: #7A515A url(gradient.jpg) fixed repeat-x bottom}

Da notare che con una semplice immagine.jpg di soli 887 byte (quindi neanche
1k) e un'unica regola CSS, applicata ad una pagina con un container a larghezza
fissa e centrato, possa dare questo risultato.

Per un
gradiente che si ripeta in cima alla pagina anzichè sul fondo, basta cambiare
il valore top con bottom, in questo modo:

body{background: #4F82FF url(gradient2.jpg) fixed repeat-x top}

Se si volesse un gradiente che resta fisso in cima alla pagina, ma non fisso
rispetto alla finestra del browser, come per esempio su Lycos,
basterebbe togliere la parola chiave fixed
dalla regola vista qui sopra.

Pattern

I pattern sono immagini che se ripetute in orizzontale e in verticale generano
un'immagine che dà continuità, quello che viene anche definito in grafica seamless
texture o seamless tile. Alcuni siti usano pattern estremamente
leggeri. Per il prossimo esempio, ho preparato il seguente pattern, una piccola
jpg di 32x32 pixels:

La regola CSS è semplicissima: infatti, se non specificato, il background viene
ripetuto sia orizzontalmente che verticalmente:

body{background: url(pattern.jpg)}

Applicata come sfondo sul body dà questo risultato.

Container principale con bordi sfumati

Un altro trend recente è quello di avere container con bordi sfumati su layout
fissi e centrati orizzontalmente. È il caso del sito
commerciale di Jeffrey Zeldman. Per ottenere un effetto del genere basta preparare
un'immagine larga, per esempio, 40 pixels in più rispetto alla larghezza del container
e alta pochi pixels. Nei venti pixels in più su ciascun lato si procederà ad aggiungere
un gradiente e delle linee un po' più marcate verso il centro. Ecco l'immagine
che ho preparato per questo esempio, rimpicciolita nelle dimensioni:

È importante per la buona riuscita che i colori laterali dell'immagine
siano perfettamente uguali. Per ottenerlo, vi basterà creare una nuova immagine
di 740 x 30 pixels, e riempirla del colore che vorrete come sfondo. Poi, attraverso
delle selezioni rettangolari, ancora meglio se usando una griglia per essere precisi,
si andrà a riempire la sezione centrale con un colore uniforme e le due laterali
con un gradiente, aggiungendo magari delle linee per marcarne i bordi. Preparata
l'immagine basterà assegnarla come sfondo al body. Questo potrebbe essere un limite,
perchè le pagine dovranno risultare più lunghe della finestra del browser, ma
anche un vantaggio perchè ci permette di risparmiare un contenitore puramente
presentazionale o l'uso del Capire il box model. Vediamo le regole CSS necessarie:

html,body{margin:0;padding:0}
body{background: #FC9D5D url(bodycontainer.jpg) repeat-y center;
font: 100.01% arial,sans-serif;text-align: center}
div#container{width: 700px;margin: 0 auto;text-align: left}

Queste tre semplici regolette ci consentono di avere uno sfondo che, pur se
attribuito al body, racchiude il container centrato. Vediamo l'esempio.

Vedremo ora come realizzare un header grafico mediante un <h1>,
elemento che dovrebbe rachiudere il titolo principale della pagina, che potrebbe
essere anche un'immagine raffigurante il logo. Per rappresentare un'immagine con
contenuto visuale effettivo quale un logo, il tag img con adeguati
attributi alt e title è senz'altro appropriato. In casi
in cui prevediamo frequenti restyling del sito o vogliamo poter offrire diverse
presentazioni grazie ad uno Style Switcher per tutti potremmo però usare una Le tecniche di Image Replacement. Per l'esempio
ho realizzato un piccolo logo, che sarà l'header grafico della pagina. È
uso comune che l'header principale sia anche il link alla home page. Vediamo il
codice HTML:

<div id="header">
<h1><a href="index.html"><span></span>Html.it</a></h1>
</div>

Come si può notare nel codice HTML c'è un elemento aggiuntivo: lo span
che precede il testo dell'header. Questo perchè la tecnica di sostituzione di
immagine che useremo è la cover-up span. Veniamo ora al CSS:

div#header h1{margin:0}

div#header h1 a{
position:relative;
display: block;
width: 250px; height: 100px;
margin-left:10px}

div#header h1 a span{
position: absolute;
width: 100%; height: 100%;
background:url(logo.jpg);
cursor: pointer /*regola per IE*/}

In sostanza si attribuisce al link il display:block per dargli
le dimensioni pari a quelle dell'immagine e lo si posiziona relativamente così
da permettere di riferire il posizionamento assoluto dello span al
suo interno. A quest'ultimo vengono assegnate le dimensioni del suo contenitore
(usando un valore percentuale pari al 100%) e lo sfondo. Volendo si potrebbe aggiungere
al logo un effetto rollover mediante il fast
css rollover. Per approfondimenti, rimando all'articolo Menu grafici con rollover e preload via css.

False colonne

È un quesito abbastanza comune: come fare ad estendere una colonna laterale
fino al footer o a fondo pagina? Non è un argomento totalmente nuovo, ne abbiamo
già parlato nella guida al layout con i CSS. Il trucco sta nel darne l'impressione, usando una semplice
immagine di background che si ripete verticalmente sul container principale invece
che sulla colonna laterale. In questa immagine si possono includere anche i bordi
o un gradiente, come ho fatto nell'esempio.
Si tratta di un'immagine alta pochi pixels e larga 200, eccola:

La pagina dell'esempio è realizzata con un layout a due colonne con float e
background. Vediamo l'HTML essenziale:

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

Questo tipo di layout ci consente di non avere vincoli sulla lunghezza relativa
delle colonne e proprio grazie all'uso del background si darà l'impressione che
la colonna secondaria si estende quanto quella dei contenuti o viceversa. Vediamo
il codice del CSS:

html,body{
margin:0;padding:0
}

body{
background: #FC9D5D url(bodycontainer2.jpg) repeat-y center;
font:100.01% arial,sans-serif;
text-align:center}

div#container{
width:700px; margin: 0 auto; text-align: left;
background: url(navbg.jpg) repeat-y top right}

div#header{
background-color: #FFFFEB;
border-bottom:2px solid #D3D3D3}

div#navigation{
float: right; width: 200px}

div#footer{
clear:right; padding: 0.5em; text-align: center;
background-color: #671C16; color: #fff; font-size: 85%}

In sostanza viene prima attribuito uno sfondo al container per dare i bordi sfumati. Al div id="content" viene attribuito lo sfondo per dare la falsa colonna. La colonna di navigazione viene resa float a destra con larghezza di 200px e ai contenuti viene dato un margine destro pari a tale larghezza. Infine, è importante attribuire a header e footer un colore pieno (o un'immagine di sfondo), così da coprire lo sfondo per la falsa colonna.

Abbiamo visto velocemente delle tecniche per personalizzare il body e le sezioni principali di pagina. Vedremo alcune possibili modi per personalizzare singoli elementi di pagina quali liste di navigazione, immagini, citazioni.

Dopo aver visto come usare il background per arrichire lo sfondo e le sezioni principali di una pagina HTML con i CSS e le immagini, è ora la volta dei singoli elementi: ovviamente non potremo trattare tutti i possibili modi, ma disporremo comunque di buone basi per avere molti effetti di personalizzazione. In seguito, un buon modo per mettervi alla prova, è osservare i siti che visitate abitualmente e quelli di ispirazione e chiedervi come si sarà ottenuto un certo effetto senza guardare il codice, tenendo sempre presente che la vere fonti di ispirazione sono la conoscenza la creatività. Solo dopo aver elaborato o realizzato l'idea potrete confrontare la vostra soluzione.

Personalizzare le liste numerate

Anzitutto due piccoli rimandi. Si è già parlato di liste e immagini come marcatori nell'articolo Un tocco di stile a liste e titoli, e dell'uso del background sulle liste di navigazione nell'Menu grafici con rollover e preload via CSS sui menu grafici con i CSS.

Parleremo qui della personalizzazione dei marcatori di liste ordinate. Ho
visto l'effetto su Blogger e ho pensato di
riprodurlo. Vediamo il codice HTML:

<h1>Quattro passi per un sito perfetto</h1>
<ol id="steps">
<li id="l1">studiare l'HTML</li>
<li id="l2">.. e i fogli di stile</li>
<li id="l3">un buon editor testuale</li>
<li id="l4">degli ottimi contenuti</li>
</ol>

l'HTML è minimale: è importante notare che ad ogni li è stato assegnato un id progressivo. Sappiamo tutti come rende una lista ordinata senza stile. Ecco come trasformeremo. Per fare ciò ho preparato quattro immagini di 50x50 pixel con i numeri. Eccole:

A questo punto veniamo al CSS. Per prima cosa si rimuovono i margini e i padding
dall'ol. Al li vengono tolti i margini e lasciato un
padding-left leggermente superiore alla larghezza dell'immagine con il numero,
in questo caso 55 pixel. Si attribuisce ai li un line-height
pari a 55 pixels. In questo caso il line-height dà l'altezza ai list-item
e consente inoltre di centrare il testo verticalmente nei 55 pixel di altezza.
Infine si attribuisce l'immagine di sfondo per ciascun list-item e il gioco è
fatto. Ecco il CSS che include anche le proprietà sui font usate:

body{ font:100.01% "Trebuchet MS",Arial, sans-serif}
h1{ font-size: 170%;color: #f60}

ol#steps{ list-style-type: none;margin: 0;padding: 0}
li{ font-size: 130%;font-weight: 500;color: #69f;
margin: 0;padding-left: 55px;line-height: 55px}

li#l1{ background:url(l1.jpg) no-repeat left center}
li#l2{ background:url(l2.jpg) no-repeat left center}
li#l3{ background:url(l3.jpg) no-repeat left center}
li#l4{ background:url(l4.jpg) no-repeat left center}

Da notare che la tecnica, leggermente modificata, può essere applicata anche ai menu di navigazione per aggiungere marcatori personalizzati o icone su ogni voce. Per ottenere l'effetto rollover ci sono due possibili modi: usare il fast CSS rollover o dichiarare uno sfondo sul list-item e uno sul link.

Effetto ombra sulle immagini

Un effetto senza dubbio efficace che si può applicare sulle immagini è aggiungere una leggera ombra (in inglese drop shadow).

Alcune4 usano elementi aggiuntivi nel markup, altre fanno distinzioni di tecnica nel caso si tratti di un paragrafo, altre invece usano i margini negativi e regole CSS aggiuntive per sistemare le cose su Internet Explorer. Questo browser infatti non supporta molto bene i margini negativi sulle immagini: se "escono" dal loro container, a meno di lavorarci un po' su, queste vengono semplicemente tagliate. La soluzione che ho elaborato, invece di usare margini negativi, usa il posizionamento relativo e non richiede nè markup nè proprietà CSS aggiuntive. La prima cosa da fare è disporre di un'immagine che darà l'effetto ombra. In questo caso ne ho preparata una di 400x400 pixel:

Da notare, quindi, che l'immagine (o il paragrafo, o il div come vedremo in seguito) non dovrà superare i 400 pixel in larghezza nè in lunghezza. In caso contrario, andrà preparata un'immagine un po' più grande. Vediamo l'HTML dell'esempio:

<div class="imgcontainer"><img src="faro.jpg" alt="faro"></div>

Ora veniamo al CSS. Al div, che è reso float, viene assegnata l'immagine di sfondo e del padding sui lati destro e inferiore pari alla larghezza della sfumatura. l'immagine viene poi traslata verso l'alto e verso sinistra attraverso un posizionamento relativo. Per la buona riuscita è importante che la somma di padding e traslazione di posizionamento cambiata di segno siano proprio uguali alla distanza che separa l'ultimo pixel della sfumatura dal bordo più vicino della sua immagine. Infine vengono anche assegnati del padding e un bordo fine per dare un effetto cornice. Ecco il codice:

div.imgcontainer{ float: left;padding:0 6px 6px 0;
background: url(dropshadow.jpg) no-repeat bottom right}

div.imgcontainer img{ display:block;
position: relative;top: -5px;left: -5px;
border:1px solid #ccc;border-color: #ccc #666 #666 #ccc;
padding:5px}

E il gioco è fatto.

Miniature con dropshadow

Le stesse regole dell'esempio appena visto, ma con diversi selettori, possono essere applicate alle miniature, usando la stessa immagine per l'ombra. Ho applicato l'effetto alle miniature usate per la galleria di immagini Galleria di immagini con ingrandimento nella stessa pagina. Ecco il risultato, l'effetto è decisamente accattivante. Vediamo l'HTML, costituito da una semplice lista non ordinata di immagini:

 

<ul id="minipics">
<li><img src="egg_small.jpg" alt="uovo"></li>
<li><img src="field_small.jpg" alt="Campo di grano in una notte d' estate"></li>
<li><img src="orange_small.jpg" alt="Arancia digitale"></li>
<!-- eccetera -->
</ul>

Le miniature verranno rese float per ottenere una galleria fluida, e verrà reso un effetto ombra. Ecco il CSS:

ul#minipics{margin:0;padding:0;list-style-type:none}

ul#minipics li{float: left;margin: 20px;padding: 0 6px 6px 0;
background: url(dropshadow.jpg) no-repeat bottom right}

ul#minipics li img{display: block;
position: relative;top: -5px;left: -5px;
border: 1px solid #ccc;border-color: #ccc #666 #666 #ccc;
padding: 5px}

Div con dropshadow

La stessa tecnica vista negli ultimi due esempi della prima parte può essere applicata senza sostanziali modifiche per ottenere div con ombra. Ho dimensionato il carattere relativamente così da mostrare che l'ombra segue i contenuti. Lascio al lettore lo studio di quest'ultimo esempio, che rispetto agli altri due presenta in più l'uso del box model hack per avere un dimensionamento consistente tra IE 5.x e gli altri browser.

Angoli arrotondati con i CSS

Si è già parlato di Angoli arrotondati con i CSS un po' di tempo fa. Da allora sono comparse diverse tecniche per avere angoli arrotondati con sfumature attorno a contenitori fluidi (per esempio su Alistapart e qui). Le due soluzioni appena citate, seppur dichiarate con markup semantico e minimale, usano almeno due contenitori aggiuntivi, ma attualmente sono comunque le migliori se si vuole disporre di un box fluidi con angoli arrotondati e sfumati. Nel 95% dei casi reali, a parer mio, una soluzione con larghezza fissa e lunghezza adattabile al contenuto è più che accettabile. Vediamo subito l'esempio, costituito da un box con larghezza fissa che potrebbe essere usato per un paragrafo o una sezione di pagina in evidenza. Da notare che il testo è ridimensionabile tramite le impostazioni del browser. La tecnica usa due immagini, una molto lunga per la parte superiore e l'altra per il fondo:

Veniamo all'HTML. È costituito da un semplice div con dentro un paragrafo:

<div class="lightbox">
<p>Qui il testo..</p>
</div>

Ora il CSS. Si tratta solo di attribuire gli sfondi e giocare con il padding:

div.lightbox{width:230px;padding: 20px 0 0;
background: url(rtop.jpg) no-repeat}

div.lightbox p{margin: 0;padding: 0 20px 20px;
background: transparent url(rbottom.jpg) no-repeat bottom left;
font: italic normal 100.01% "Times New Roman",Times,serif;
color: #2F3D51;line-height:1.4}

Il div stabilisce le dimensioni, un padding superiore e la parte superiore dell'immagine.
Al paragrafo si attribuiscono padding laterali e inferiore e la parte inferiore dell'immagine.
In questo modo abbiamo anche evitato l'uso del box model hack, spostando il padding orizzontale sul paragrafo.
La stessa tecnica può essere applicata per esempio a una lista di navigazione racchiusa in un div.

Un newsbox con header e angoli arrotondati e sfumati

La tecnica che abbiamo appena visto ha due limiti: il primo è la lunghezza totale delle due immagini di sfondo,
il secondo è che ammette un solo paragrafo, o comunque un solo elemento all'interno del contenitore principale.
Nel prossimo esempio vedremo come superare questi due limiti. Si tratta di un newsbox,
ossia un box con un titolo e uno o più paragrafi, che potrebbe essere indicato ad esempio a contenere delle news o sezioni
in evidenza che abbiano un titolo rappresentativo. Vediamo il codice HTML:

<div class="newsbox">
<h2>Newsbox</h2>
<p>Un paragrafo... </p>
<p>Altro paragrafo: </p>
</div>

Ecco le tre immagini di cui ci serviremo. Dall'alto verso il basso sono le immagini per il titolo, il corpo e la chiusura:

Il meccanismo è semplice. Al newsbox viene attribuito lo sfondo per la chiusura, e del padding inferiore per lasciargli un po' di
spazio. All'header l'immagine dell'header, e ai paragrafi l'immagine del corpo centrale. È essenziale che i margini
verticali di default su h2 e p vengano rimossi e sostituiti dal padding per garantire una continuità tra i background.
Ecco il CSS:

div.newsbox{width: 230px;padding: 0 0 30px;
background: url(rb.jpg) no-repeat bottom left}

div.newsbox h2{line-height: 30px;margin: 0;padding-top: 10px;
background: url(rt.jpg) no-repeat top left;
text-align: center}

div.newsbox p{margin: 0;padding: 0.5em 15px 0;
background: url(rc.jpg) repeat-y top left}

Anche qui, con la stessa tecnica è possibile realizzare menu di navigazione. In
questo caso è anche possibile realizzare un container con bordi arrotondati, come
per esempio su Lycos
che usa una tecnica simile per i box di navigazione e per il container principale.
In tal caso, c'è da notare che per qualsiasi tipo di layout, ogni pagina è composta almeno da:

• container principale
• sezione dei contenuti
• header
• footer

Ecco che disponiamo di (almeno) tre contenitori per assegnare gli sfondi arrotondati a header e footer,
e lo sfondo indifferentemente al container oppure alla sezione dei contenuti.

Citazioni

Per concludere la serie di esempi dedicati al background, ecco una citazione personalizzata
grazie al background. Ecco l'HTML:

<blockquote>
<p>Testo della citazione</p>
<cite>autore</cite>
</blockquote>

Si sono usate due piccole immagini con le virgolette, e tre semplici regole CSS. La differenza, rispetto versione senza stile è senz'altro notevole. Il codice CSS di tutti gli esempi è incorporato nell'HTML, e insieme alle immagini è disponibile per il download. Alla prossima.