.:: Maurizio Pelizzone ::.

Bello il titolo … vero?

Trasparenza come effetto di trasparenza ,
Stile come fogli di stile ( aka CSS )

Quello che vedete è un esempio di come rendere compatibile l’effetto trasparenza tramite una semplice impostazione dei CSS

Per rendere possibile questo miracolo è sufficente usare queste 3 parole magiche:

Dove la prima serve ad Internet Explorer , la seconda a Mozilla ( e/o Firefox ) e la terza serve o servirà a tutti quei browser che applicano in modo corretto lo stadard CSS3.

In realtà su diversi siti ho trovato riferimenti alla proprietà opacity in relazione allo standard CSS2 ma personalmente non ho trovato un riscontro nella documentazione fornita del W3C

Questo che vedete è il risultato:

Questo è il codice che ho usato per l’esempio …

<div style="width: 400px; height: 300px; background: url('water.jpg') repeat; border: 2px solid black;"> <div style="width: 350px; height: 120px; border: 1px solid black; margin-left: auto; margin-right: auto; margin-top: 150px;background-color: #fff;filter:alpha(opacity=20); opacity: 0.2; -moz-opacity:0.2;"> <div style="padding: 20px;"> Prova di inserimento testo all’interno di un riquadro con sfondo trasperante.<br /> Prova di inserimento testo all’interno di un riquadro con sfondo trasperante. </div> </div> </div>

… ma una programmazione più ordinata permette la separazione della logica css da quella html ….

<style type="text/css"> .sfondo { width: 400px; height: 300px; background: url(’water.jpg’) repeat; border: 2px solid black } .trasparente { width: 350px; height: 120px; border: 1px solid black; margin-left: auto; margin-right: auto; margin-top: 150px; background-color: #fff; /* inizio gestione trasparenza <em>/ filter:alpha(opacity=20); opacity: 0.2; -moz-opacity:0.2; /</em> finegestione trasparenza */ } .testo { padding: 20px; } </style>

<div class="sfondo"> <div class="trasparente"> <div class="testo"> Prova di inserimento testo all’interno di un riquadro con sfondo trasperante.<br /> Prova di inserimento testo all’interno di un riquadro con sfondo trasperante. </div> </div> </div>

Un idea per l’implemetazione potrebbe essere basata su “pulsanti” con cambio del livello di trasparanza al passaggio del mouse.