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

admin, ajax, android, apache, app, audio, backup, beta, blog, bordi, browser, caffè, calcolo, calibre, categorie, cd, chrome, clienti, cloud, cms, condivisione, css3, csv, database, debian, desktop, download, drive, driver, dump, e-reader, evolution, file, firefox, flash, font, foto, freelance, funzioni, gd, gedit, gimp, htc, html5, iexplorer, immagini, indirizzo, inkscape, internet, ip, iphone, java, javascript, jquery, kivy, kv, less, lettura, link, linux, live, mac, macchina, mail, menu, mobile, mod, mp3, mysql, nautilus, network, newsletter, ombra, open office, opera, os, paypal, pdf, picasa, plugin, python, safari, skype, smartphone, smf, ssh, stampante, tabs, tag, tastiera, terminale, test, testo, textile, textpattern, theme, ubuntu, usb, video, web editor, website, windows, wysiwyg, xfce4, youtube

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.