Archivi tag: trasparente

Oscurare la pagina di fondo e visualizzare un popup

Vogliamo ricreare il classico effetto di oscuramento della pagina web, che sembra passare in secondo piano come se diventasse uno sfondo per dare evidenza al popup, che altro non è che un div nascosto da richiamare (o rinascondere) quando opportuno.

Dovremo anche creare preventivamente un’immagine in formato PNG semitrasparente (la chiamerò “semitrasparente.png“) che servirà a coprire il tutto. Va bene anche di 1x1px che poi si ripeterà dove serve.

Vediamo un po’ di codice.

La struttura dell’(x)html dovrebbe essere una cosa del genere:

<div id="coprente">
  <div id="box_popup_che_deve_comparire">
      ... contenuto del box ...<br>
      Potremmo mettere un po' di pubblicità...<br><br>
  </div>
</div>

Continua la lettura di Oscurare la pagina di fondo e visualizzare un popup

Trasparenza coi css

Vediamo come possiamo applicare degli effetti di trasparenza ad elementi della pagina web. Possiamo rendere trasparenti foto, contenitori, testi etc…

Possiamo farlo senza javascript, tramite i normali css.

Per avere piena compatibilità coi vari browser si impostano tre attributi:

filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity: 0.3;

Internet Explorer si appoggia a Filter, che accetta intervalli tra 0 e 100.

I browser con motore di rendering basato su Gecko (come Firefox o Netscape) usano: -moz-opacity:0.3; e opacity:0.3; accettano valori numerici decimali, compresi tra 0 e 1.

Un esempio concreto di utilizzo: Continua la lettura di Trasparenza coi css