Una delle nuove caratteristiche che sono allo studio del W3C riguarda la capacità degli elementi XHTML di risultare più o meno visibili. A tale proposito di rimando all’indirizzo della discussione, per approfondire gli argomenti. La nuova proprietà visibility dei CSS3 permette di controllare gli elementi di un layout, messi in rapporto e in correlazione con gli altri. Questi elementi possono apparire opachi oppure translucidi, e tale comportamento è dipendente
alla quantità di opacità che viene attribuita a quel particolare elemento. Infatti quando uno degli elementi è trasparante, oscura in parte l’elemento che si trova dietro, e quindi bisogna ben considerare queste eventualità.

Aspettando il pieno supporto di tutti i browser ai CSS3 ci accontenteremo di utilizzare una combinazione di standard dei “vecchi” CSS 2.1 che risultano comprensibili sia da Firefox e Mozilla, che da Internet Explorer. L’unica nota negativa e riguardo è che tale procedura non è supportata dagli stessi browser su piattaforme diverse che non siano Microsoft. Mentre invece è tutto funzionante con il browser Safari su sistemi Mac.

Ecco qui di seguito un esempio funzionante della tecnica descritta di seguito.

Il collegamento che vi ho segnalato descrive una nuova proprietà che prende il nome di opacity ; ed è supportata solamente dai browser della famiglia Mozilla. Questa nuova proprietà funziona come tutte le altre, l’unica nota da discutere è quella riguardante il valore da applicare al livello di opacità. Ogni valore parte da 0.0 , completamente trasparente, e raggiunge 1.0, dove sarà completamente opaco. Se l’elemento a cui si applica la proprietà è un box che ne contiene altri trasparenti, a questi ultimi verrà sommata la quantità di trasparenza.

Per quanto riguarda Internet Explorer si può utilizzare un filtro alpha per ottenere lo stesso effetto, e concettualmente il metodo d’impiego è il medesimo. Anche qui bisogna specificare il livello di opacità che si vuole dare all’elemento; la differenza nella dichiarazione consiste nel fatto che questa deve essere compresa fra un valore di 0 (zero) ed un massimo di 100, dove l’elemento sarà completamente opaco. Di default il valore sarà impostato a 100 dal browser.

Purtroppo nessuno dei due browser interpreta le proprietà, e pertanto, bisogna applicarle contemporaneamente. Vediamo un po’ di codice per capirci meglio:

#wrap {
  position:absolute;
  top:20px;
  left:20px;
  width:500px;
  height:400px;
  background: url("orange.jpg") no-repeat;
}
#wrap .text {
  filter:alpha(opacity=60); /* per IE/WIN */
  opacity: 0.6; /* per Mozilla&Co. */
  background:#ffffff;
  border:1px dotted #9a9a9a;
  margin-top:15px;
  margin-left:100px;
  width:380px;
  padding:3px;
}

Qui abbiamo creato un contenitore con un’immagine di sfondo, e un selettore classe che comanderà il testo e avrà anche l’onere di presentare l’opacità.

Come si può vedere per indicare l’opacità con il browser Internet Explorer bisogna scrivere:

filter:alpha(opacity=60);

mentre per dare lo stesso effetto su i browser basati su Mozilla si può utilizzare:

opacity: 0.6;

La questione importante da comprendere è che l’opacità verrà applicata al background del selettore in cui è posizionata, pertanto è molto importante dichiarare sempre tale background di modo che la tecnica funzioni.

Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.