Salve a tutti i lettori di good2know.
Oggi volevo proporvi una delle nuove proprietà css3 per creare box(div) con sfondi multipli senza dover dichiarare milioni di classi.
Qui potete vedere una demo.
La sintassi è molto semplice.
.box {
width: 400px;
background: Â url(images/bg-top.png) top no-repeat,
url(images/bg-bottom.png) bottom no-repeat,
url(images/bg-repeated.png) repeat-y;
}
Ovviamente questa specifica funziona perfettamente per quasi tutti i browser, eccetto che per Internet Explorer(e quale se no? 
)
In aiuto però ci viene Jason Johnston con il suo Css3PIE (Css3 - Progressive Internet Explorer), una libreria javascript che ci viene in aiuto per applicare gli stili css3 anche per Internet Explorer.
Come si usa Css3PIE ?
Scaricate la libreria e scompattatela in una cartella che volete (io in genere la tengo nella cartella js dei javascript).
In alcuni casi dovrete aggiungere al file .htaccess la riga:
AddType text/x-component .htc
Questo perchè Internet Explorer non restituisce il content-type corretto per il file .htc che useremo.
Ora nella proprieta del css andrete ad aggiungere la proprietà behavior e -pie-background, quindi il css diventerà così:
<pre>width: 400px;
background: Â url(images/bg-top.png) top no-repeat,
url(images/bg-bottom.png) bottom no-repeat,
url(images/bg-repeated.png) repeat-y;
<pre>-pie-background: Â url(images/bg-top.png) top no-repeat,
url(images/bg-bottom.png) bottom no-repeat,
url(images/bg-repeated.png) repeat-y;</pre>
</pre>
behavior: url(path/to/PIE.htc);
Ora il box avrà gli sfondi ripetuti anche su Internet Explorer.
Iscriviti al feed di Good2know