Effetto sdoppiamento immagine di sfondo con i CSS

Non mi dilungo, in questo articolo, nel descrivere i "benefici" che questo codice apporta nelle nostre pagine. Mi soffermerei, invece, su quello che all' interno di un documento XHTML si può ottenere, abbinando tale linguaggio di marcatura con i CSS.

Quello che oggi vorrei proporre è, come scritto nel titolo, un effetto, spero simpatico, che possiamo introdurre nel nostro sito. Dobbiamo "munirci" di due sole immagini; una con opacità al 100% (quindi con colore "pieno") e l' altra con una opacità inferiore. Inseriremo l' immagine con colore "pieno" sullo sfondo della pagina e l' altra sullo sfondo di un contenitore; per intenderci, esse saranno "sovrapposte".

Quando scorreremo la pagina, l' immagine meno opaca si sposterà verso il basso, lasciando quella con colore più forte lì dove l' abbiamo posizionata inizialmente. Le due immagini, per non creare confusione, le ho nominate in questo modo: piena.gif ed opaca.gif. Il riferimento dei nomi è, come capirete benissimo, all' opacità. Procediamo con la dichiarazione del codice CSS per il body del documento:

html, body{
margin:0; 
padding:0; 
font-family: "Trebuchet MS", Verdana, sans-serif; 
text-align:center;
background: url(opaca.gif) center 80px fixed no-repeat; }

Vogliamo assegnare una immagine di sfondo alla pagina [url(opaca.gif)], al centro e distante 80 px dall' alto e che non sia ripetuta. Questo è il rigo più importante di tutto il codice postato sopra. Le altre dichiarazioni sono comprensibilissime e non serve che passi alla descrizione rigo per rigo. Nella pagina dobbiamo inserire un box contenitore:

#container{
margin:0 auto; 
padding:0; 
text-align:left; 
border:1px solid #900;
background: url(piena.gif) center 80px no-repeat transparent; width:600px; }
html>#container { width:600px; }

Il rigo di codice che ci interessa maggiormente è quello in grassetto. La differenza che c' è dall' altro codice sta solo nel cambio dell' immagine; in effetti qui avremo l' immagine più colorata. La posizione rimane sempre la stessa in quanto, come scritto all' inizio, dobbiamo creare una sovrapposizione delle due gif. Il colore di sfondo del container l' ho settato a transparent in quanto dobbiamo avere la possibilità di vedere quello che c' è sotto.

Altri tag che ho dichiarato per la pagina di esempio non hanno bisogno di descrizione particolare. Non sono altro che due titoli (H1 ed H2) ed un paragrafo (p). Riempiendo con un bel pò di testo il nostro contenitore, possiamo vedere l' effetto dell' immagine sdoppiata nel seguente file di esempio finale.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati