Questo thread mostra come ottenere con i CSS un effetto grafico carino, cioè oscurare parzialmente la pagina per dare l'idea che tutti gli elementi tranne uno siano in secondo piano.
Il trucco è semplicemente mettere un elemento fittizio fisso grande quanto tutta la pagina, dargli uno sfondo colorato, aumentare lo z-index in modo che sia davanti a tutto e renderlo opaco parzialmente. Il risultato è una cosa tipo questa
codice:
span {
position: fixed;
height: 100%;
width: 100%;
z-index: 3;
background-color: #333333;
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
}
Vorrei usare questa cosa per ottenere il seguente effetto. L'utente clicca su un link, compare in primo piano un form e lo sfondo si oscura. Un esempio si ha sul sito di Badoo quando cliccate su Entra (dovete avere Javascript attivo). La mia idea era di mettere dentro lo span il form, e mettere tutto dentro un link. Alla dichiarazione dello span aggiungo la riga
e infine metto una cosa tipo
codice:
a:active span {
display: block;
}
Cosa dovrebbe succedere (secondo me): al momento in cui l'utente clicca, viene mostrato il form con lo sfondo semi-oscurato. A questo punto lo sfondo rimane attivo perché il link non è più raggiungibile (è dietro il form, avendo uno z-index minore). L'utente fa quello che vuole con il form, poi clicca su OK o su Annulla, che contengono due link che rimettono a posto la cosa rimettendo display: none.
Ovviamente, se scrivo è perché non succede niente di tutto questo: se l'elemento da visualizzare copre il link, non si attiva. Se tolgo
l'elemento non copre più il link e tutto funziona, salvo il fatto che solo parte dello schermo viene oscurata (quella sotto il link).
Secondo voi c'è modo di implementare tramite CSS un trucchetto del genere?
Rispondi quotando