Prima dell'avvento dei filtri ombra di Microsoft per Internet Explorer o l'aggiunta di proprietà box-shadow per lo standard CSS, si dovrà modificare singolarmente le immagini in un programma di grafica per aggiungere ombre agli elementi sul tuo sito Web. Ora, tuttavia, è possibile utilizzare diverse opzioni di codifica per produrre le stesse ombre agli oggetti e farli apparire davanti la pagina in Internet Explorer.

Shadow Box CSS

CSS3 consente di applicare gli stili agli elementi "in box", ad esempio tabelle o div, per dare loro le ombre di goccia. I browser più moderni, tra cui Internet Explorer, visualizzano questa proprietà. Sintassi di esempio, come segue, produrrà un'ombra a 10 pixel verso il basso e a destra dell'elemento, con un 5-pixel mosso distanza e un'ombra grigia. È necessario specificare dimensioni, imbottitura, bordi o margini come vedete la misura.

< style type = "text/css" >
div
{
box-shadow: 5px 10px 10px #888888;
}
< / stile >

Filtri di IE

Con IE 5.5, Microsoft ha introdotto filtri proprietari che realizzare un'ombra simile a quello della proprietà CSS ombra casella se si utilizza il filtro dropshadow proprietarie, che consente di specificare che gli assi X e Y offset così come il colore dell'ombra. Ad esempio, la seguente produrrà un'ombra simile a uno creato con i CSS:

< style type = "text/css" >
div
{
filtro: progid:DXImageTransform.Microsoft.DropShadow (OffX = 10, OffY = 10, Color = #8888888);
}
< / stile >

Il filtro ombra esterna è simile, ma accetta una direzione dell'ombra..--che varia da 0 a 360, che rappresentano i gradi del cerchio intorno il tuo elemento-- piuttosto che l'offset X e Y, come può vedere qui sotto:

< style type = "text/css" >
div
{
filtro: progid:DXImageTransform.Microsoft.Shadow (direzione = 90, colore = #8888888);
}
< / stile >

CSS condizionale

I filtri in IE sono proprietari e non funzioneranno in altri browser. Per creare un effetto di casella su più browser, in modo più dei tuoi visitatori abbiano la stessa esperienza, è necessario utilizzare la soluzione di filtro e la soluzione CSS con tag condizionali. Se si utilizzano i filtri ombra esterna o ombra, è possibile utilizzare un'istruzione condizionale utilizzare CSS filtrata solo se il lettore è utilizzando IE. Il seguente dovrebbe creare le ombre intorno il vostro div nella maggior parte dei browser:

< style type = "text/css" >
div
{
box-shadow: 5px 10px 10px #888888;
}
< / stile >
<!-[se lt IE 9] >
< style type = "text/css" >
div
{
filtro: progid:DXImageTransform.Microsoft.DropShadow (OffX = 10, OffY = 10, Color = #8888888);
}
< / stile >
<! [endif]-->

Avviso

Perché i filtri CSS non seguono gli standard Web, il tuo foglio di stile non leggerà come codice valido dal validatore CSS del W3C quando si utilizzano filtri. Inoltre, Microsoft ha deprecato filtri con l'uscita di IE9, che significa che è ora possibile utilizzare la proprietà di "box-shadow" standard per creare le ombre per gli elementi. Per questo motivo, i tag condizionali deve essere indirizzata a versioni di IE più vecchi di IE9. Tuttavia, se non si utilizza una dichiarazione di tipo di documento in file HTML, IE9 sarà operare in modalità non standard e non mostrare l'ombra CSS.