Sfondo trasparente

La parziale trasparenza dello sfondo della pagina è un effetto molto efficace per catturare l’attenzione del visitatore, specie se abbinato ad un’accurata scelta dello sfondo. In passato l’uso della trasparenza non ha avuto grande fortuna a causa dello scarso (e per giunta differente) supporto dei vari browser. A partire da Firefox 2.0 e Internet Explorer 7.0 la situazione è decisamente migliorata e quindi possiamo decidere di usare, ovviamente senza abusarne e tenendo conto della leggibilità del risultato finale, questa tecnica.

Entriamo ora nel dettaglio.
Il primo problema col quale dobbiamo confrontarci una volta inserite nel CSS le proprietà che regolano la trasparenza è quello che, assieme allo sfondo, viene opacizzato anche il contenuto del DIV; il problema non è ovviamente solo estetico, ma incide pesantemente anche sulla leggibilità e sull’usabilità del sito.
Per ovviare a questo inconveniente, utilizzeremo un approccio che prevede la creazione di tre DIV: il primo è una sorta di contenitore (nel caso di un sito a colonne sarà una delle colonne in questione); il secondo, che chiameremo “overlay”, è un DIV a sfondo opaco che andrà ad “espandersi” fino a riempire il primo DIV; il terzo ospiterà i nostri contenuti (testo, immagini o quant’altro).
Il codice HTML sarà quindi il seguente:

<div id=”column-1″ class=”container”>
<div class=”overlay”></div>
<div class=”content”>
<h2>Contenuto</h2>
</div>
</div>

Andiamo ora ad esaminare il codice CSS (ovviamente potrete deciderlo di personalizzarlo come preferite):

#column-1 {
position: relative;
float: left;
width: 500px;
}

Il codice sopra riportato riguarda il primo DIV (contenitore); è indispensabile specificare una larghezza fissa.
Vediamo ora il codice per il secondo DIV:

.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);
}

Le proprietà top, bottom, left impostata a 0 servono a garantire che il DIV trasparente occupi tutto il DIV contenitore. Le ultime tre righe servono ad attivare la trasparenza (in questo esempio al 65%) in Firefox e IE.
Passiamo ora all’ultimo DIV, quello che ospiterà il contenuto della colonna:

#column-1 .content {
width: 460px;
padding: 20px;
}

.content {
position: relative;
float: left;
}

Come immancabilmente accade in ogni nostro tutorial, vediamo il codice necessario per rendere il tutto funzionante con Internet Explorer 6:

* html #column-1 .overlay {
height: expression(document.getElementById(”column-1″).offsetHeight);
}

In alternativa al “* html” si possono usare i commenti condizionali del CSS.
La trasparenza non funzionerà comunque per chi usa IE6 e ha disabilitato Javascript.

Ricordiamo infine che ogni colonna del nostro layout dovrà avere un ID unico e il relativo “hack” per IE 6.

Per vedere una demo del risultato ottenibile seguendo questo tutorial, potete visitare questa pagina.

Fonte: Bits&pixels



Altri articoli che potrebbero interessarti