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.
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.
Ciao
complimenti per il sito e per gli Ottimi articoli che hai scritto…
Se ti va posso mettere un link sul mio sito …
buona giornata
ciao,
un vero professionista, sito molto bello, articoli ben scritti. . .non nascondo che mi piacerebbe creare un sito bello come il tuo. Complimenti.
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.
la prima cosa che mi viene in mente è definire il box che le contiene con trasparenza impostata a zero.
a naso dovrebbe funzionare …
Ottimo trick! peroprio quello che cercavo! grazie!
felice che ti sia servito…
Bello semplice e chiaro…Complimenti!!
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.
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!!!