Con l'avvento dei CSS3 e la sua relativa diffusione tra i principali browser, oggi possiamo realizzare dei gradevoli effetti di trasparenza sugli elementi (div) presenti in una pagina HTML.

Ecco a voi un esempio pratico:

Vediamo il realtivo codice.

Dato il seguente codice presente all'interno di una pagina:

<div id="box_trasparente">Questo box ha l'alfa impostato</div>
<div id="sfondo_trasparente">Questo box invece ha solo lo sfo
ndo trasparente</div>

Vediamo ora come utilizzare questi nuovi strumenti:

Nel primo caso (box trasparente) renderemo tutto il box trasparente. Questo significa che anche il suo contenuto sarà trasparente (pensiamo ad un effetto di "disabilitazione"):

<style>
     body{
         background-image: url(bg.jpg);
     }
     #box_trasparente{
         width:300px;
         height:300px;
         background-color: #AAFFCC;
         float:left;
         opacity:0.3;
     }

Come potete vedere, basterà (salvo mettere un'immagine di sfondo per capire cosa succede) impostare la proprietà "opacity" ad esempio ad un valore basso (.3)

Se invece vogliamo solamente che lo sfondo sia trasparente ecco il codice:

#sfondo_trasparente{
         float:right;
         width:300px;
         height:300px;
         background-color: rgba(255,255,0,0.2);
        color:#FFF;
     }

Invece di dare un semplice codice esadecimale, impostiamo i valori in rgba (red, green, blue, alpha), dove il nostro valore risulta essere appunto del 20% (0.2)

The following two tabs change content below.