Trasparenza con Stile

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:

filter:alpha(opacity=20);
-moz-opacity:0.2;
opacity: 0.2;

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:

Prova di inserimento testo all’interno di un riquadro con sfondo trasperante.
Prova di inserimento testo all’interno di un riquadro con sfondo trasperante.

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

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

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

9 Comments

  1. Ciao, mi sono imbattuto sul tuo sito per caso.
    Cercavo proprio questo trick, però vorrei chiederti una cosa: se le scritte le vorrei non trasparenti??
    Mi spiego:
    sotto sfondo, poi un riquadro bianco semi-trasparente e poi dentro a quest’ultimo delle parole non trasparenti…

    Sai come si fa???

    Spero di essermi spiegato 😛

    Ciao, complimenti per il sito.

  2. Bè si questo per la trasparenza di un layer me diemntichi una cosa che tutti gli elementi filgi del div, nel tuo caso:

    Prova di inserimento testo all’interno di un riquadro con sfondo trasperante.
    Prova di inserimento testo all’interno di un riquadro con sfondo trasperante.

    prende la stessa trasparenza del div padre.

  3. Ciao , anch’io ho lo stesso problema
    la mia pagina dovrà avere la seguente struttura :
    sfondo
    contenitore trasparente (div)
    altro div a cui non voglio applicare la trasparenza (div)

    ma il secondo div , anche se impostato con opacity 100 risulta sempre trasparente…

    ho risolto solo con IE impostando diversi valori di z-index , ma ovviamente questo non mi può andare bene….

    help!!!

Leave a Reply

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.