Le specifiche CSS3 rendono il web davvero diverso e sempre più personalizzabile! Con le nuove, specifiche infatti si può giocare con l’opacità degli oggetti rendendoli cosi semitrasmarenti a nostro piacimento.

Per utilizzare questo effetto CSS3 dobbiamo ricorrere alla regola opacity.

Che ve lo dico a fare questo effetto css3 non funziona su Internet Explorer se non con un filtro di casa microsoft, che vedremo nell’esempio.

Il css3 all’opera: il codice esempio

<style type="text/css">
	.tuaclasse {
	opacity: .6; // per tutti i browser che supportano CSS3
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; //  solo per IE 8
	filter: alpha(opacity=60); // solo per IE 5-6-7
	}
</style>

Vediamo subito un esempio su alcune immagini:

Opacità al 100%

Opacità al 60%

Ovviamente potete abbassare ulteriormente l’opacità dell’oggetto che in questo caso è una immagine.

Un bell’effetto da creare su siti con background scuro è quello di stylizzare le immagini con una opacità bassa e aumentarla onmouseover!