Kreatore.it

Sviluppo applicativi Lamp

RGBa, trasparenza dei box su tutti i browser

Scritto da: | Categorie: ,

La definizione del colore tramite i valori RGB nelle varie versioni di CSS è sempre stata valida ed ora, partendo dal questo presupposto, con i CSS3 possiamo anche definire un ulteriore valore: il canale Alfa

A livello sintattico i canali RGB si esprimono come sempre con valori che variano da 0 (nero) a 255(bianco)nella successione Rosso,Verde,Blu. Il canale Alfa viene espresso con valori che variano da 0.0 (completamente trasparente) a 1.0 (completamente opaco).

p{background-color: rgba(255, 255, 255, 0.5)}@p {background-color: rgba(255, 255, 255, 0.5)}@ in questo esempio questo paragrafo ha uno sfondo bianco con Alpa al 50% del valore.
Da notare che a differenza della proprietà opacity la trasparenza viene assegnata solo allo sfondo e non anche al contenuto.

E’ noto però che i CSS3 e la proprietà RGBa sono accettati solo dai più recenti browser. Come fare allora per rendere visibile lo sfondo anche su browser più datati?
La soluzione più semplice è la doppia dicitura:

p {
	background-color: rgb(255, 255, 255);/* The Fallback */
	background-color: rgba(255, 255, 255, 0.5);
} 

In questo modo si vedrà lo sfondo colorato anche sui browser più vecchi e la proprietà RGBa verrà invece utilizzata sui browser che la accettano.
Questo genere di soluzioni vengono chiamate fallback
Una alternativa molto simile è quella di utilizzare un immagine png che vada a sostituire lo sfondo:

p {
	background: url(semitrasparente.png);
	background: rgba(255, 255, 255, 0.5);
} 

Cosi come succede nella situazione precedente, se la proprietà RGBa non viene accettata viene visualizzata un’immagine in png trasparente.

Poichè Internet Explorer rimane sempre uno dei Browser più utilizzati e molti ancora usano una delle versione dalla 6 alla 8 applicare questo fallback è una cosa importante.

In alternativa possiamo giocare con le proprietà di IE:

<!--[if lt IE 9]>
   <style type="text/css">
   .color-block {
       background:transparent;     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 
    </style>
<![endif]-->

usando questo codice, legato ad una classe css (ma anche direttamente sull’elemento) creiamo una transizione di colori ai quali possiamo applicare una variabile Alfa questa volta basata su caratteri esadecimali: #AARRGGBB

Tags: , , , , , ,

Articoli Simili

Cerca per tag

Cerca per categoria

© 2011 Kreatore.it :: Sito web realizzato da Marco Casalegno

TXP | Admin | Home | Back to Top

Tutte le informazioni e le immagini sono rilasciate sotto licenza secondo la Creative Commons License 2.0.