L'ombra del filtro non funziona in Firefox

August 7

Qualsiasi CSS che utilizza "filtro" come una proprietà è in realtà di proprietà di Internet Explorer di Microsoft e non è andare a lavorare al di fuori di quel browser. L'attributo filtro non è conforme agli standard; non solo non funziona con Firefox e altri browser, non convaliderà quando eseguito su validatore CSS di Web Consortium tutto il mondo. Purtroppo, non c'è soluzione cross-browser per ombre CSS.

Filtri e CSS

I filtri sono una caratteristica di proprietà di Internet Explorer. L'elemento "filtro" per l'ombra di testo richiede un certo numero di oggetti da lavorare su testo; questo include specificando uno zoom, un colore di sfondo e gli elementi filtranti in totale:

.ombra {
zoom: 1;
color: # 000000;
background-color: # CCCCCC;
Filtro: chroma (color = # CCCCCC) ombra (color = # C0C0C0, direzione = 120, resistenza = 21);
}

Questo non è l'unico filtro specificato per l'uso con Internet Explorer, e tutti condividono la stessa sintassi di base. E 'stato progettato con CSS 2.1 in mente, anche se non conta come valida CSS e considerato un hack. Mentre il filtro funziona con Internet Explorer, non funziona in qualsiasi altro browser.

CSS3 e Firefox

La soluzione per drop-ombre in Firefox e altri browser non-IE è quello di utilizzare CSS3. CSS3 ha un text-shadow e una proprietà box-shadow, che sia fare esattamente quello che suonano come. Questi entrambi utilizzano simile la sintassi di specificare il valore orizzontale, verticale e il valore del colore, così come opzione di sfocatura e la diffusione. Il problema qui è che Internet Explorer ha il supporto CSS3 spotty - e, come di aprile 2012, IE9 e le versioni precedenti di IE non riconoscono la proprietà ombra come definito da CSS3. Tuttavia, tra i due elementi è possibile creare un sito web che funziona sia in Firefox e IE.

Utilizzando text-shadow e box-shadow

Le proprietà text-shadow e box-shadow hanno lo stesso concetto di base. Per esempio, se si desidera impostare tutte le intestazioni H1 di avere un'ombra testo grigio, il CSS sarebbe simile a questa:

H1 {text-shadow: 2px 2px 2px #CCCCCC; }

Il primo 2px imposta l'ombra orizzontale da due pixel, il secondo definisce l'ombra verticalmente da due pixel e la terza imposta la distanza sfocatura. È possibile omettere i pixel di sfocatura, se non si vuole una macchia sulla tua ombra.

Box-ombra è la stessa, con un elemento aggiuntivo tra la sfocatura e il colore: la diffusione. La diffusione indica la dimensione della scatola ombra.

Sviluppare per i browser più

Per impostare il testo ombra che funziona sia in IE e Firefox, è sufficiente necessario avere sia l'elemento filtrante e la proprietà text-shadow sullo stesso elemento. Per esempio, se si voleva fare H1 ombra in tutti i browser, si può usare qualcosa di simile a:

.ombra {
text-shadow: 2px 2px 2px #CCCCCC;
zoom: 1;
color: # 000000;
background-color: # CCCCCC;
Filtro: chroma (color = # CCCCCC) ombra (color = # C0C0C0, direzione = 120, resistenza = 21);
}

Questo non è valido CSS in quanto non convaliderà, ma si creerà un effetto ombra simile a Firefox e IE.