Prima dell'avvento dei filtri ombra di Microsoft per Internet Explorer o l'aggiunta della proprietà box-shadow allo standard CSS, si dovrà modificare singolarmente le immagini in un programma di grafica per aggiungere ombre per gli elementi sul tuo sito web. Ora, però, è possibile utilizzare diverse opzioni di codifica per produrre le stesse ombre di oggetti e farli apparire di fronte alla pagina in IE.

CSS scatola di ombra

CSS3 consente di applicare stili agli elementi in scatola, come le tabelle o div, per dare loro ombre. La maggior parte dei browser moderni, tra cui Internet Explorer, visualizzare questa proprietà. sintassi di esempio, come segue, produrrà un'ombra ai 10 pixel al basso e destra dell'elemento, con una distanza di sfocatura 5 pixel e un'ombra grigia. È necessario specificare le dimensioni, padding, margini o confini, come si vede in forma.

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

Filtri IE

Con IE5.5, Microsoft ha introdotto filtri proprietari che ottengono un'ombra simile a quello della proprietà scatola di ombra CSS se si utilizza il filtro DropShadow proprietaria, che permette di specificare il X e offset Y, così come il colore dell'ombra. Ad esempio, il seguente produrrà un'ombra simile a quello creato con CSS:

<Style type = "text / css">
div
{
Filtro: progid: DXImageTransform.Microsoft.DropShadow (OffX = 10, Offy = 10, Colore = # 8888888);
}
</ Style>

Il filtro ombra è simile, ma accetta una direzione d'ombra - che va da 0 a 360, che rappresenta i gradi del cerchio intorno al vostro elemento - piuttosto che il X e offset Y, come potete vedere qui sotto:

<Style type = "text / css">
div
{
Filtro: progid: DXImageTransform.Microsoft.Shadow (direzione = 90, Colore = # 8888888);
}
</ Style>

condizionale CSS

I filtri in IE sono proprietari e non funzioneranno in altri browser. Per creare un effetto di dialogo su più browser, in modo più dei vostri ospiti hanno la stessa esperienza, è necessario utilizzare sia la soluzione CSS e la soluzione filtro con tag condizionali. Sia che si utilizzi i filtri DropShadow o ombra, è possibile utilizzare un'istruzione condizionale per usare i CSS filtrato solo se il lettore sta usando IE. Il seguente dovrebbe creare ombre intorno agli div nella maggior parte dei browser:

<Style type = "text / css">
div
{
box-shadow: 10px 10px 5px # 888888;
}
</ Style>
<! - [If lt IE 9]>
<Style type = "text / css">
div
{
Filtro: progid: DXImageTransform.Microsoft.DropShadow (OffX = 10, Offy = 10, Colore = # 8888888);
}
</ Style>
<! [Endif] ->

avvertimento

Dato che i filtri CSS non seguono gli standard web, il vostro foglio di stile non sarà letto come codice valido dal validatore CSS del W3C quando si utilizzano i filtri. Inoltre, Microsoft ha deprecato filtri con il rilascio di IE9, il che significa che ora è possibile utilizzare la "box-shadow" proprietà standard per creare ombre per gli elementi. A causa di questo, i tag condizionali devono avere come obiettivo versioni di IE di età superiore a IE9. Tuttavia, se non si utilizza una dichiarazione di tipo di documento nel file HTML, IE9 funzionerà in quirks mode e non mostrare l'ombra CSS.