CSS  »  Articoli  »  Effetti con CSS 

Lo scorso mese di dicembre è stata presentata l'edizione 2008 di 24Ways, la rassegna di articoli dedicati al web design che accompagna da qualche anno le giornate che portano al Natale.

In molti hanno commentato positivamente, oltre che la consueta qualità degli articoli, anche la nuova veste grafica del sito. A colpire sono stati soprattutto gli accattivanti effetti di trasparenza sparsi un po' dovunque sulla pagina, sulle aree fisse così come a livello di rollover su specifici elementi.

I molti che hanno commentato positivamente erano certamente utilizzatori delle ultime versioni di Safari, Firefox e Google Chrome, semplicemente perché gli unici in grado di godere appieno del supporto della trasparenza RGBa, una funzionalità introdotta nei CSS3 che promette e permette esiti davvero interessanti a livello visuale (una tabella riepilogativa del supporto nei vari browser è presente in calce a questo articolo di Chris Coyier).

Gli utenti di Opera e Internet Explorer si sono dovuti accontentare di una versione del sito perfettamente funzionante ma priva degli effetti di trasparenza ottenuti con RGBa. Il confronto tra questo screenshot (Safari su Mac) e questo (IE7) chiarisce abbastanza bene la situazione, anche se solo la navigazione diretta sulla pagina rende al meglio ciò che qui intendiamo dire (il riferimento è soprattutto ai rollover).

In questo articolo vedremo dunque cos'è la trasparenza RGBa e come usarla già oggi sui browser che la supportano offrendo agli utenti di Opera e IE un'esperienza accettabile in termini di fruizione della pagina e dei suoi contenuti.

Opacity e RGBa

Prima di procedere oltre è necessario chiarire un punto preliminare. Nei CSS è già prevista una proprietà in grado di rendere trasparente l'elemento a cui è applicata. Si tratta di opacity.

Supportata nativamente da tutte le versioni più recenti di Safari, Firefox, Opera e Chrome, può essere implementata su IE tramite i filtri proprietari di Microsoft. Chiariamo con degli esempi.

#box1 {
	width:400px;
	height:400px;
	padding:20px;
	color:#000;
	background-color:rgb(0,0,255);
	opacity:0.5;
}

Chi utilizza IE, in qualunque versione, continuerà però a vedere il colore solido. Per ottenere la trasparenza dobbiamo ricorrere ai filtri:

#box1 {
	width:400px;
	height:400px;
	padding:20px;
	color:#000;
	background-color:rgb(0,0,255);
	filter: alpha(opacity=50);
	opacity:0.5;
}

Ecco il risultato.

Qual è il problema di opacity? Il principale consiste nel fatto che l'effetto di trasparenza è applicato a tutti gli elementi figli dell'elemento a cui è assegnato. Nel nostro caso anche il testo risulta quindi translucido, non solo lo sfondo.

Di questo problema non soffre invece la trasparenza RGBa. Ecco il terzo esempio. Se usate Firefox, Safari o Chrome osservate bene il testo riempitivo e confrontatelo con quello del secondo.

Altri articoli

Altre guide

Altre newsletter