{"id":92,"date":"2005-10-16T11:31:21","date_gmt":"2005-10-16T10:31:21","guid":{"rendered":"http:\/\/www.zarrelli.org\/new_blog\/?p=92"},"modified":"2005-10-16T11:31:21","modified_gmt":"2005-10-16T10:31:21","slug":"della-opacita","status":"publish","type":"post","link":"https:\/\/www.zarrelli.org\/blog\/della-opacita\/","title":{"rendered":"Della opacit\u00e0"},"content":{"rendered":"

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

Purtroppo, solo per Mozilla (anche Firefox) e Internet Explorer.<\/p>\n

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

Qualche esempio<\/h2>\n

Il punto di partenza sar\u00e0 la mia immagine in formato manga, giusto per avere qualcosa di brutto che non possa essere ulteriormente peggiorato dai nostri esperimenti:<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

Ora, giochiamo un po’.<\/p>\n

Iniziamo a sfumare<\/h3>\n

Prendiamo l’immagine precedente e mettiamola in una serie di sfumature, partendo da un’opacit\u00e0 al 25% e salendo di 25% ogni volta:<\/p>\n

\n<\/span><\/span><\/span><\/span>\n<\/div>\n

Simpatico, vero? Ecco il codice che potrete inserire nelle vostre pagine e adattare:<\/p>\n