Amici web designer, come sapete la più grande noia x noi disegnatori che realizziamo i nostri layout tramite i css, è la diversità con cui essi vengono interpretati dai vari browser.
In particolare mi riferisco alle trasparenze che non vengono mantenute con Internet Explorer.
E’ vero che con IE 7 il problema è stato risolto, però ci sono ancora molte persone che usano la versione precedente.
Vi segnalo il sito dell’azienda Bigline, attiva nel mercato degli occhiali sportivi.
In questo sito sono state usate delle PNG trasparenti, un effetto importante per ogni artista del web
in quanto permette una sfumatura graduale del canale alpha del colore, a differenza della immagini GIF dove la trasparenza riguarda un unico colore della palette.
Di seguito riporto il codice usato per ottenere la trasparenza, il tutto perfettamente funzionante anche con IE6!
E’ molto semplice, nel file .css basta fare un div uguale a quello che ha di sfondo
la vostra_immagine.png
#contenitore #pager
{
background-image:url(../images/vostra_immagine.png);
background-repeat:no-repeat;
width:905px;
height:356px;
margin:0;
padding:0;
}
aggiungendo però alcune proprietà
*html #contenitore #pager
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/vostra_immagine.png”, sizingMethod=”scale”);
background:transparent none no-repeat;
width:905px;
height:356px;
margin:0;
padding:0;
}
Ovviamente questo vale per tutti i div nei quali volete mettere una PNG trasparente come sfondo.
Ciao, alla prossima!
