Sia HTML5 che CSS3 non sono ancora in versione definitiva ma è sicuramente il momento di incominciare ad utilizzarne alcune delle innovazioni con parsimonia, cercando quindi di non inificiare sull'esperienza utente di chi ancora naviga con browser datati. In questo caso per browser datati non ci si riferisce al solo Internet Explorer ma è già sufficiente incappare in un utente che naviga con Mozilla Firefox in versione 3.6 per avere problemi di compatibilità con molte proprietà (ad esempio le transizioni realizzabili con CSS3).
In questo articolo utilizzeremo la proprietà RGBa introdotta nella versione 3 del CSS per realizzare un layout contenente dei div con background fisso visualizzabile solo allo scorrimento della pagina.
Per comprendere meglio di cosa si sta parlando possiamo vedere l'immagine di Figura 1 oppure il risultato finale al seguente link.
Come possiamo vedere, nella barra laterale, ci sono dei div con background trasparente che visualizzano un'immagine di background scrollando la pagina verso il basso.
RGBa vs opacity
Prima di procedere con l'articolo vediamo brevemente cos'è l'RGBa e quale è la differenza con la proprietà opacity.
Sappiamo bene che già nella versione 2 del CSS era possibile definire un colore attraverso la modalità RGB che utilizzava i tra canali Red, Green, Blue. Il formato RGBa è del tutto simile al classico RGB con l'aggiunta del canale alpha che definisce l'opacità dello sfondo. Una proprietà come la seguente:
div { background: rgba( 255, 255, 255, 0.8 ); }definisce un colore di sfondo bianco per i div con un'opacità 0.8.
La differenza tra RGBa e la classica proprietà opacity è che quest'ultima assegna l'opacità anche ai discendenti del div mostrando quindi l'intero contenuto in trasparenza; RGBa, invece, assegna la trasparenza al solo elemento.
Per approfondire le due regole è possibile consultare la Guida CSS3.
Struttura HTML
Veniamo ora alla realizzazione dell'esempio visto in precedenza. La struttura HTML di cui abbiamo bisogno non ha nulla di elaborato:
-
un
divcontenitore con larghezza impostata in percentuale -
un
divper il contenuto con larghezza settata al 56% -
un
divper la colonna laterale con larghezza settata al 43%. Questo div a sua volta contiene i singoli contenitori in cui visualizzeremo le immagini di background
Il codice HTML dell'esempio è il seguente:
<body>
<div id="wrapper">
<div id="content">
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
</div>
<div id="sidebar">
<div id="side1"><p>Lorem ipsum dolor sit amet consectetuer montes ac ac tristique augue.</p></div>
<div id="side2"><p>Lorem ipsum dolor sit amet consectetuer montes ac ac tristique augue.</p></div>
</div>
</div>
</body>Codice CSS
Prima di procedere con il codice necessario all'effetto descritto in questo articolo, vediamo il codice CSS necessario alla realizzazione del layout. Il layout realizzato è impostato utilizzando unità in percentuale con una larghezza minima di 960px.
I div contenuti all'interno del #content e della #sidebar utilizzano la proprietà RGBa per definire il background con un colore bianco è una trasparenza di 0.9.
* { margin: 0; padding: 0; }
body {
background-color: #000;
font-family: Verdana, sans-serif;
font-size: 11px;
line-height: 16px;
min-width: 960px;
}
#wrapper {
background: url('images/background.jpg') no-repeat top center fixed;
margin: 0 auto;
overflow: hidden;
min-height: 100%;
}
#content {
float: left;
width: 56%;
clear: both;
}
#content div {
background: rgba(255,255,255,0.9); /* sfondo bianco con trasparenza */
width: 520px;
float: right;
margin: 20px 0;
}
#content p { margin: 10px; }
#sidebar {
float: right;
width: 43%;
margin-top: 600px;
}
#sidebar div {
background: rgba(255,255,255,0.9); /* sfondo bianco con trasparenza */
padding: 20px;
width: 330px;
height: 150px;
float: right;
overflow: hidden;
clear: both;
margin: 20px 0;
}Background
A questo punto vogliamo assegnare un'immagine di background ad ogni div contenuto nella sidebar. Ogni immagine avrà una posizione fissa nell'angolo inferiore destro della pagina e verrà visualizzata solo quando il div che la contiene sarà posizionato su di essa attraverso lo scroll della pagina.
Il codice CSS di cui abbiamo bisogno non necessita di proprietà particolari. Utilizzeremo la proprietà background-image per assegnare l'immagine di sfondo e le proprietà background-position e background-attachment per posizionare e fissare l'immagine.
#sidebar div {
background-position: right 390px;
background-repeat: no-repeat;
background-attachment: fixed;
}
#sidebar div#side1 { background-image: url('images/side1.png'); }
#sidebar div#side2 { background-image: url('images/side2.png'); }Il risultato finale è visualizzabile al seguente link.
Compatibilità
L'effetto realizzato nell'articolo è compatibile con tutti i browser moderni che supportano la proprietà RGBa. Problemi di compatibiltà si hanno quindi con la versione 8 di Internet Explorer ed inferiori. Con queste versioni l'immagine di sfondo viene visualizzata correttamente allo scrolling della pagina ma non viene interpretata la proprietà con cui viene assegnato il background bianco con trasparenza.
