Della opacità

Sul sito di Mandarin Design, trovo un’interessante digressione su come utilizzare l’alfa blending nei css in modo da giocare con gli effetti di trasparenza.

Purtroppo, solo per Mozilla (anche Firefox) e Internet Explorer.

L’opacità può essere considerata come un’operazione di post processazione, ovvero dopo che un elemento è stato disegnato a video, il valore di opacità determina quanto quest’ultimo venga sfumato all’inteno di una immagine composita. Il valore di opacità attribuito tramite i CSS a un elemento può andare da 0.0 (trasparenza completa) a 1.0 (opacità completa) e ogni numero al di fuori di quest’arco verrà riportato al suo interno. Se l’oggetto è un elemento contenitore, l’effetto sarà applicato ai suoi contenuti come se venissero sfumati sullo sfondo, usando una maschera in cui il valore di ogni pixel (della maschera) è il valore di opacità indicato.

Qualche esempio

Il punto di partenza sarà la mia immagine in formato manga, giusto per avere qualcosa di brutto che non possa essere ulteriormente peggiorato dai nostri esperimenti:

Ora, giochiamo un po’.

Iniziamo a sfumare

Prendiamo l’immagine precedente e mettiamola in una serie di sfumature, partendo da un’opacità al 25% e salendo di 25% ogni volta:

Simpatico, vero? Ecco il codice che potrete inserire nelle vostre pagine e adattare:

</p> <div style="width:250px;margin:0 auto;"> <span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;"><img decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" width="50" height="50"/></span><span style="float:left;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;"><img decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" width="50" height="50"/></span><span style="float:left;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;"><img decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" width="50" height="50"/></span><span style="float:left;filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;"><img decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" width="50" height="50"/></span></div> <p>

Da notare che è stato utilizzato del codice specifico per il browser Mozilla moz-opacity, che con Firefox non si rende necessario. Meglio, comunque, utilizzarlo per una piena compatibilità con le versioni più vecchie di Mozilla.

Opacizziamo al passaggio del mouse

Definiamo alcune classi CSS che ci consentano di modificare l’opacità degli oggetti al passaggio del mouse:

</p> <div style="width:250px;margin:0 auto;"> <style type="text/css"> <!-- div.transOFF {width: 100%; background-color: silver;border:1px solid black; } div.transON {width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; } div.trans25 {width: 100%; background-color: silver;opacity:.25;filter: alpha(opacity=25); -moz-opacity: 0.25;border:1px solid black; } div.trans75 {width: 100%; background-color: silver;opacity:.75;filter: alpha(opacity=75); -moz-opacity: 0.75;border:1px solid black; } --> </style> </div> <p>

E ora creiamo un testo in un div che ci consenta di gestire il passaggio del mouse:

</p> <div style="width:250px;margin:0 auto;"> <div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'"> <p style="padding:5px;width:75%;">Passaci sopra con il mouse…Devi avere Mozilla o IE</p> </div> </div> <p>

Ora, l’effetto ottenuto sarà il seguente:

Invertiamo l’attributo di partenza del div, e utiliziamo la classe transON, passando poi a transOFF

Opacizziamo le immagini al passaggio del mouse

Applichiamo quanto finora visto alle immagini:

Il relativo codice è:

</p> <div style="width:250px;margin:0 auto;"> <div class="trans25" style="width:50px;height:50px;" onmouseover="this.className='transOFF'" onmouseout="this.className='trans25'"><img loading="lazy" decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" width="50" height="50" title="trans25 to transOFF on mouseover" alt="trans25"/></div> <div class="transON" style="width:50px;height:50px;" onmouseover="this.className='transOFF'" onmouseout="this.className='transON'"><img loading="lazy" decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" width="50" height="50" title="transON to transOFF on mouseover" alt="transON"/></div> <div class="trans75" style="width:50px;height:50px;" onmouseover="this.className='transOFF'" onmouseout="this.className='trans75'"><img loading="lazy" decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" width="50" height="50" title="trans75 to transOFF on mouseover" alt="trans75"/></div> </div> <p>

Opacizziamo immagini e testo

Proviamo ad applicare la trasparenza contemporaneamente sia a immagini che al testo.

Il relativo codice è:

</p> <div style="width:250px;margin:0 auto;"> <div style="width:75%;" class="trans25" onmouseover="this.className='transOFF'" onmouseout="this.className='trans25'"> <p style="padding:5px;"><img loading="lazy" decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" style="float:left;padding:5px;" width="50" height="50"/>Passaci sopra con il mouse…Devi avere Mozilla o IE. L’opacità è al 25%</p> </div> <div style="width:75%;" class="transON" onmouseover="this.className='transOFF'" onmouseout="this.className='transON'"> <p style="padding:5px;"><img loading="lazy" decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" style="float:left;padding:5px;" width="50" height="50"/>Passaci sopra con il mouse…Devi avere Mozilla o IE. L’opacità è al 50%</p> </div> <div style="width:75%;" class="trans75" onmouseover="this.className='transOFF'" onmouseout="this.className='trans75'"> <p style="padding:5px;"><img loading="lazy" decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" style="float:left;padding:5px;" width="50" height="50"/>Passaci sopra con il mouse…Devi avere Mozilla o IE. L’opacità è al 75%</p> </div> </div> <p>

Immagini opacizzate e link ipertestuali

Complichiamo un po’ le cose e proviamo a creare una immagine, che cambi opacità al passaggio del mouse e che funga anche da collegamento ipertestuale. Iniziamo con il creare un paio di stili ad hoc:

</p> <div style="width:250px;margin:0 auto;"> <style type="text/css"> a.linkopacity img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;}</p> <p>a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; } </style> </div> <p>

E adesso è il momento di inserire il seguente codice nella pagina html:

</p> <div style="width:250px;margin:0 auto;"> <p><a class="linkopacity" href="https://www.zarrelli.org/blog/index.php/2005/10/16/della-opacita/"><img loading="lazy" decoding="async" src="https://www.zarrelli.org/blog/wp-content/images/giomang.jpg" width="100" height="119" style="border:1px solid black;"/></a></p> </div> <p>

Fatto? Ok, il risultato è…

Decisamente interessante. Non rimane ora che fare qualche prova, in attesa della seconda puntata sulla trasparenza con i CSS, nella quale verranno affrontati applicazioni dell’opacità davvero attraenti.

• Categoria: Di tutto un po'
• Tag: Applicazioni, FON, Internet