splash con sfondo in ombra

**bttf2** · 21-01-2008, 00:17

Sto cercando qualche esempio di un effetto che vedo ormai spesso in molte pagine html.
Appare in primo piano un box (solitamente pubblicitario). Tutto quello che sta sotto viene messo in "ombra" fino a quando il box non viene chiuso.
Penso che si tratti di un effetto realizzabile con i css...
Esempi ?
Grazie

**Mich_** · 21-01-2008, 11:01

L'effetto e` realizzato con una combinazione di JS e CSS (altrimenti non riusciresti a farlo sparire).

Per lo stesso effetto statico, puoi fare:

codice:

<body>
  <div id="tutto">
    qui tutta la pagina
  </div>
  <div id="banner">
    <a href="#" onclick="document.getElementById('banner').style.display='none'; document.getElementById('tutto').style.opacity='100%';">
      qui il banner
    </a>
  </div>
</body>

CSS:

codice:

 ...
#tutto {
  opacity: 50%;
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
}
#banner {
  position: absolute;
  top: YYYpx;  /* o altro sistema per posizionare */
  left: XXX px;
  z-index: 100;
}

Ho inserito anche un esempio di JS per eliminare l'effetto, ma non sono sicuro che sia corretto.

**bttf2** · 21-01-2008, 13:12

grazie per la risposta.
Non riesco a vedere l'esempio in javascript. Dove lo posso scaricare ?
Hai per caso qualche esempio pronto in css da poter scaricare ?
Grazie ancora

**Mich_** · 21-01-2008, 16:04

L'ho inserito embedded nell'HTML. Non puoi non vederlo!!
E` un po' grezzo, e forse non molto apprezzato da chi paga per il banner ... ma e` un punto di partenza.

**bttf2** · 21-01-2008, 16:33

Perfetto, grazie

Discussione: splash con sfondo in ombra

Strumenti discussione

Ricerca discussione

Visualizza

splash con sfondo in ombra

Permessi di invio