CSS Overlay: creare un livello con posizione assoluta nella pagina web

Quello di cui ci occuperemo oggi, a leggere il titolo, è un argomento prettamente di webmarketing. Non avendo la presunzione di volermi occupare di tale materia, mi permetto solo di indicare il percorso e come fare per arrivare a realizzare un overlayer. L´acronimo CSS l´ho aggiunto in quanto rappresenta il mezzo, non l´unico ovviamente, per poter raggiungere il nostro obbiettivo.
Di cosa si tratta?

Avrete certamente notato, navigando per siti, di banner fatti in flash, e non, i quali pubblicizzano qualsiasi prodotto. Tali banner possono chiudersi "a tempo" oppure basta cliccare sulla X posta in alto a destra perchè non si legga più il loro contenuto. Indubbiamente attraggono l´attenzione, all´apertura della pagina, più dei soliti banner posizionati nella testata oppure lateralmente. Un´altra caratteristica è che si possono realizzare anche non nelle "canoniche" misure: 468 X 60 ecc...
Personalmente ne ho visti parecchi di forma quadrata, rotonda, pentagonale... come più piace, l´importante è raggiungere l´attenzione dell´utente.

Occupandomi, come è noto a chi frequenta il mio sito, di accessibilità ho pensato ad un overlayer non fatto in flash, bensì ad uno con i CSS ed una semplice immagine; questo è solo un sempio; appreso il modo di realizzarlo, ci si potrebbe divertire come meglio si crede.

Partiamo con la nostra applicazione e con lo spiegare cosa otterremo al termine del presente tutorial: un banner che apparirà sui contenuti della pagina e che può essere "spento" cliccando sul link apposito. Questa funzione la deleghiamo ad un solo rigo di DOM. Ma andiamo per gradi. Per prima cosa realizziamo un contenitore (che potrebbe essere la nostra struttura del sito) il cui codice CSS è:

#container{ 
margin:20px auto; 
padding:0; 
width:600px; 
height:700px;
border:1px solid #f60; 
background:#fff; 
text-align:left; 
position:relative; 
} 

L'unica cosa che c´è da segnalare è la posizione relativa da assegnare al container, in quanto al suo interno metteremo il banner in posizione assoluta. Le dimensioni della larghezza ed altezza(600px X 700px) sono state date a caso e posizioneremo il banner al centro del div #container.
Adesso veniamo al banner, il cui codice è:

#banner{ 
position:absolute; 
left:100px; 
top:100px;
font-size:22px; 
color:#000; 
background: #111;
width:400px; 
height:300px;
text-align:right;
font-weight:bold;
} 

Le dimensioni, in questo caso, si adatteranno all´immagine di sfondo: 400px X 300px.
font-size:22px perchè avremo la X per la chiusura del banner (possiamo aumentare o diminuire la grandezza del font). text-align:right in quanto metteremo la suddetta X in alto a destra (che vedremo in un passaggio successivo).
Dopo queste due dichiarazioni di codice CSS, vediamo il primo step del nostro esempio.

Adesso proviamo ad aggiungere del testo nel div #container e di conseguenza il relativo codice:

#container p{ 
margin:0;
padding:.3em; 
font-size:.9em;
}  

Proviamo a vedere, nel secondo passaggio, come rende il blocco contenitore con testo e livello.

Comincia a prendere forma, no? Ovviamente non lasceremo il livello di colore nero ma metteremo una immagine, oggetto di una ipotetica pubblicità.
Al precedente div #banner basta sostituire solo il background; invece del colore mettiamo un file grafico come sfondo, in questo modo:

#banner{
------
background:url(landscape.jpg) left top no-repeat;
------
}  

Tutto il resto rimane invariato. Il terzo step ci mostra quello che abbiamo appena modificato.

Molto meglio, non c´è che dire! Solo che così come è adesso, il livello rimarrebbe sempre in primo piano non dandoci la possibilità di leggere quello che è scritto al di sotto.

Siamo quasi giunti al termine e manca poco affinchè il banner pubblicitario sia funzionante al 100%. Attraverso le pseudoclassi a, a:hover, diamo un colore alla X posta in alto, all´interno del banner.

#banner a:link, #banner a:visited{ 
color:#fff; 
text-decoration:none;
} 
#banner a:hover, #banner a:focus, #banner a:active{
color:#000; 
text-decoration:none; 
} 

Se volessimo inserire uno slogan, all´interno del banner, lo possiamo fare dichiarando una classe appositamente creata, con le seguenti caratteristiche:

#banner p.testo{
margin:180px 0 0 0; 
padding: 0 ;
color:#fff; 
text-align:center;
font-size: 1em;
}  

Bene... adesso ci manca da vedere questo penultimo passaggio prima di inserire la parte "interattiva" attraverso il DOM.

Spegnere il banner con il DOM

L´unico codice che ci serve per poter annullare il livello che appare in primo piano, si compone soltanto del seguente codice:

onclick="document.getElementById('banner').style.visibility='hidden'; document.getElementById('chiudi').style.visibility='hidden'" 

Questo è tutto quello che serve. Vedere la pagina finale di esempio e, questa volta, la X posta in alto a destra sulla foto, assolve il suo compito.
Se desiderate avere una pubblicità diversa in ogni pagina, basta copiare ed incollare le dichiarazioni CSS del div #banner con all´interno una immagine diversa (facendo attenzione ad assegnare un nome differente al div se l´immagine la posizionate come background).

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