Effetti di trasparenza ed opacità con i CSS

Possibile che solo JavaScript possa aiutarci ad ottenere questo risultato? Certo che no! Altrimenti avrei incluso questo articolo nella sezione appropriata e non qui.

Quindi la risposta è: possiamo affidarci ai CSS e non appesantire le nostre pagine con dei bytes che potrebbero essere "risparmiati", oltre al fatto che, coloro i quali hanno disabilitato JavaScript nel loro browser, non potrebbero beneficiare di tali effetti.

Anche gli utenti che utilizzano il browser Opera non hanno la possibilità di vedere immagini o testi opaci durante la loro navigazione. Possiamo dire che è un difetto poco importante o irrilevante per questo browser. Gli esempi che vedremo, sono interpretati in maniera corretta sia da Internet Explorer che dai browser Mozilla. Cominciamo a vedere cosa possiamo ottenere con delle immagini.

Opacità applicata alle immagini

Proviamo a realizzare una "scala" di opacità su una stessa immagine in maniera crescente. Vale a dire che cominceremo da una foto con opacità 25 fino a visualizzarla con opacità 100: i suoi colori reali. Inseriremo nella pagina 4 immagini, all' interno di un contenitore; su ogni immagine applicheremo una classe per ottenere l' effetto opaco, tranne che sull' ultima. Il codice CSS, per le classi, è:

.opacity25{
 filter:alpha(opacity=25);
 -moz-opacity:.25;
 opacity:.25;
 }  

Internet Explorer utilizza:

filter:alpha(opacity=0); 

Filter accetta intervalli tra 0 e 100. I browser con motore di rendering basato su Gecko ( per esempio Mozilla,Firefox,Netscape ) usano:

-moz-opacity:0.x;
 opacity:.25; 

Vale a dire che accettano valori numerici decimali, compresi tra 0 e 1. Motivo per cui è stato scritto, nel codice per la classe ".opacity25", il valore .25. Per creare le altre 2 classi [ 50 e 75 ], basta nominarle con un nome differente: [ per questo esempio ho usato ".opacity50" e ".opacity75"]. Per l'ultima immagine, non serve applicare nessuna classe. Vediamo la pagina di esempio con la scala di opacità.

Effetto opaco su una immagine nello stato :hover

Capito, con il primo esempio, come va trattato un elemento, oppure una immagine, passiamo adesso ad applicare questo effetto sempre ad una immagine, quando con il mouse siamo su di essa; cioè nello stato :hover. Il codice è molto semplice e di facile apprendimento:

a.opacity img {
 filter:alpha(opacity=50); 
 -moz-opacity: 0.5; 
 opacity: 0.5;
 } 
 a.opacity:hover img {
 filter:alpha(opacity=100); 
 -moz-opacity: 1.0; 
 opacity: 1.0;
 }  

In pratica abbiamo una opacità, dichiarata attraverso una classe che ho nominato "opacity" al 50% nello stato iniziale della foto, sullo stato :link. Quando passiamo con il mouse sull' immagine, essa deve tornare al suo colore naturale. Il codice che deve essere inserito nella pagina html è:

<a class="opacity" href="#"><img src="/imm.jpg" alt="" ></a>  

Visualizziamo questo secondo effetto nella pagina di esempio.

Trasparenza applicata ad un #div nello stato :hover

Oltre che sulle immagini, possiamo applicare un effetto opaco anche su un elemento di blocco, o #div. L' esempio di cui ci occuperemo prevede che quando con il mouse si va sul contenitore, cambierà il suo colore di sfondo ed il colore del testo (che eventualmente vogliamo inserire) all' interno. L' elemento di blocco l' ho nominato: #box. In questo box inseriremo del testo attraverso una classe. Il codice CSS che ci interessa è:

a#box{
 width:500px;
 height:40px;
 background:#aaa;
 text-decoration:none;
 filter:alpha(opacity=50); 
 -moz-opacity: 0.5; 
 opacity: 0.5;
 }
 a#box:hover{
 width:500px;
 height:40px;
 filter:alpha(opacity=100); 
 -moz-opacity: 1.0; 
 opacity: 1.0;
  }
 .testo{
 margin:0;
 padding:0;
 } 

Il codice che ho scritto è di facile comprensione e lo abbiamo visto anche dagli esempi fatti precedentemente. Avremo una "transizione" da un grigio al 50% fino al suo colore "intero". Nella pagina html scriveremo:

<a id="box" href="#" class="testo">Testo...</a>  

Da notare che nelle dichiarazioni CSS ho fatto precedere il nome del contenitore dalla "a" riferita allo stato :link ed allo stato :hover del contenitore stesso. Perchè? Semplice. Perchè non possiamo includere un elemento di blocco in un elemento inline. Per intenderci:

<a href="#" class="testo"><div id="box">Testo</div></a> 

È semanticamente errata una cosa del genere. Ecco, quindi, che abbiamo "aggirato" l' ostacolo ottenendo il nostro effetto. Possiamo vedere la pagina di esempio con l'effetto opaco applicato a tutto il div.

Per il momento mi fermo qui. La prossima volta vedremo altri effetti del genere su testo, immagini e quello che si può fare con un mix di questi 2 elementi. Risultati che potrebbero trarre in inganno, in quanto potrebbe sembrare che siano stati ottenuti con programmi di grafica.